模態框拖拽插件簡易參數配置分析javascript
//-> 後期引入 drag-plugin.js 經過 new Drag([selector],[options])
複製代碼
簡易參數配置分析css
/* * 簡易的拖拽插件 * new Drag([selector],[options]); * SELECTOR * 是按住誰來實現拖拽 * OPTIONS = {} * element:拖拽中要移動的元素(默認值:當前按住的元素) * boundary:是否進行邊界校驗 (默認值:true,不能超過要移動元素所在容器的範圍,須要開發者保證:當前移動的元素是相對於它所在容器定位的) * * 聲明周期函數(鉤子函數) ->callback 回調函數 * dragstart: 拖拽 開始 * dragmove: 拖拽中 * dragend: 拖拽結束 */
複製代碼
代碼以下:html
~ function () {
/* * 拖拽插件封裝 */
class Drag {
constructor(selector, options) {
this.initParams(selector, options);
this._selector.addEventListener('mousedown', this.down.bind(this));
}
//=>參數初始化(儘量把一切信息都掛載到實例上,這樣在其它方法中,只要能獲取到實例,這些信息均可以調用 =>咱們儘量保證每一個方法中的THIS都是實例)
initParams(selector, options = {}) {
this._selector = document.querySelector(selector);
//=>配置項的默認值信息
let defaultParams = {
element: this._selector,
boundary: true,
dragstart: null,
dragmove: null,
dragend: null
};
defaultParams = Object.assign(defaultParams, options);
//=>把配置項信息都掛載到實例上 後期只要是 可以拿到實例,那麼實例上全部的信息都能用
Drag.each(defaultParams, (value, key) => {
this['_' + key] = value;
});
}
//=>實現拖拽的效果
down(ev) {
let {
_element
} = this;
this.startX = ev.pageX;
this.startY = ev.pageY;
this.startL = Drag.queryCss(_element, 'left');
this.startT = Drag.queryCss(_element, 'top');
this._move = this.move.bind(this);
this._up = this.up.bind(this);
/* 爲防止焦點丟失,咱們把move 和 up 都綁定給document 可是這樣作會裏面的this指向改變, 不是咱們想要的結果 基於 bind 方法 柯里化函數預處理機制 將this 從新指向實例 */
document.addEventListener('mousemove', this._move);
document.addEventListener('mouseup', this._up);
//=>鉤子函數處理
this._dragstart && this._dragstart(this, ev); //-> this 爲 實例 ev 事件對象
}
move(ev) {
let {
_element,
_boundary,
startX,
startY,
startL,
startT
} = this;
let curL = ev.pageX - startX + startL,
curT = ev.pageY - startY + startT;
if (_boundary) {
//=>處理邊界
let parent = _element.parentNode,
minL = 0,
minT = 0,
maxL = parent.offsetWidth - _element.offsetWidth,
maxT = parent.offsetHeight - _element.offsetHeight;
curL = curL < minL ? minL : (curL > maxL ? maxL : curL);
curT = curT < minT ? minT : (curT > maxT ? maxT : curT);
}
_element.style.left = curL + 'px';
_element.style.top = curT + 'px';
//=>鉤子函數處理
this._dragmove && this._dragmove(this, curL, curT, ev); //-> this 爲 實例 ev 事件對象
}
up(ev) {
/* 移除時和綁定時 也是如此 基於bind 的機制 */
document.removeEventListener('mousemove', this._move);
document.removeEventListener('mouseup', this._up);
//=>鉤子函數處理
this._dragend && this._dragend(this, ev); //-> this 爲 實例 ev 事件對象
}
//=>設置工具類的方法(把它當作類[普通對象]的私有屬性)
static each(arr, callback) {
if ('length' in arr) {
//=>數組||類數組
for (let i = 0; i < arr.length; i++) {
callback && callback(arr[i], i);
}
return;
}
//=>普通對象
for (let key in arr) {
if (!arr.hasOwnProperty(key)) break;
callback && callback(arr[key], key);
}
}
static queryCss(curEle, attr) {
//-> 將獲取到值 parseFloat 防止後期 數學計算時出現字符串拼接
return parseFloat(window.getComputedStyle(curEle)[attr]);
}
}
window.Drag = Drag;
}();
複製代碼
例子引用 下面可看實現效果java
[[http://localhost:63342/Java Script JS/就業正式課/week6/0902/drag1.html?_ijt=p3nhitvi4dr1895a68f7ab6olb](http://localhost:63342/Java Script JS/就業正式課/week6/0902/drag1.html?_ijt=p3nhitvi4dr1895a68f7ab6olb)數組
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>珠峯培訓</title>
<link rel="stylesheet" href="css/reset.min.css">
<style>
html,
body {
height: 100%;
overflow: hidden;
}
#box {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background: red;
}
#box h2 {
height: 30px;
background: green;
cursor: move;
}
</style>
</head>
<body>
<div id="box">
<h2></h2>
</div>
/* 引入咱們的插件 drag-plugin.js */
<script src="js/drag-plugin.js"></script>
<script>
new Drag('#box h2', {
element: box,
boundary: false
});
</script>
</body>
</html>
複製代碼
例子二 下面可看實現效果app
[http://localhost:63342/Java Script JS/就業正式課/week6/0902/drag2.html?_ijt=p3nhitvi4dr1895a68f7ab6olb](http://localhost:63342/Java Script JS/就業正式課/week6/0902/drag2.html?_ijt=p3nhitvi4dr1895a68f7ab6olb)函數
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>珠峯培訓</title>
<link rel="stylesheet" href="css/reset.min.css">
<style>
html,
body {
height: 100%;
overflow: hidden;
}
#box {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100px;
height: 100px;
background: red;
cursor: move;
}
#container {
position: relative;
box-sizing: border-box;
margin: 30px auto;
width: 300px;
height: 200px;
border: 2px solid lightseagreen;
}
</style>
</head>
<body>
<div id="box"></div>
<div id="container"></div>
<script src="js/drag-plugin.js"></script>
<script>
new Drag('#box', {
dragend: function (examp, ev) {
//=>this:Drag example
let _element = this._element;
let minL = container.offsetLeft,
minT = container.offsetTop,
maxL = minL + container.offsetWidth - _element.offsetWidth,
maxT = minT + container.offsetHeight - _element.offsetHeight,
curL = Drag.queryCss(_element, 'left'),
curT = Drag.queryCss(_element, 'top');
if ((curL >= minL && curL <= maxL) && (curT >= minT && curT <= maxT)) {
//=>在指定的範圍內
container.appendChild(_element);
_element.style.left = 0;
_element.style.top = 0;
return;
}
//=>沒有拖動到指定的範圍內
_element.style.left = this.startL + 'px';
_element.style.top = this.startT + 'px';
}
});
</script>
</body>
</html>
複製代碼