基於純原生js封裝模態框拖拽效果插件

時間 2019-11-05

原文原文鏈接

簡易模態框拖拽插件

模態框拖拽插件簡易參數配置分析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>
複製代碼