自定義拖拽指令

Vue 添加自定義指令
自定義指令

<div class="active" v-for='item in 10' v-drag   style="width: 100px;
height: 100px;background: red;position: absolute;left: 0;top: 0;"></div>

directives: {
				  drag: {
					/* inserted: function (el) {
					  el.onmousedown = function (ev) {
						ev.stopPropagation();
						let obj = document.getElementsByClassName("active")[0];
						let disX1 = ev.clientX - obj.offsetLeft;
						let disY1 = ev.clientY - obj.offsetTop;
						document.onmousemove = function (ev) {
						  let l = ev.clientX - disX1;
						  let t = ev.clientY - disY1;
						  obj.style.left = l + 'px';
						  obj.style.top = t + 'px';
						};
						document.onmouseup = function () {
						  document.onmousemove = null;
						  document.onmouseup = null;
						};
					  };
					}*/
					 //指令綁定到元素    第二種實現方式
					bind(el, binding) {
						/*
						*  el  指令綁定的元素，可以用來直接操作dom
						*  binding 一個對象，包含許多的屬性
						 */
						el.onmousedown = function (e) {
							console.log("開始拖動");
							let disX = e.clientX - el.offsetLeft;
							let disY = e.clientY - el.offsetTop;

							document.onmousemove = function (e) {
								console.log("拖動中");

								el.style.left = e.clientX - disX + "px";
								el.style.top = e.clientY - disY + "px";
							};
							document.onmouseup = function () {
								document.onmousemove = null;
								console.log("拖動結束");
							};
							return false;
						}
					}
				  },
				},

v-drag.limit  界限

drag: {
					 inserted: function (el,binding) {
					  el.onmousedown = function (ev) {
						let oEvent=ev ||  window.event
						oEvent.stopPropagation();
						console.log(el)
						/* 
						    一、clientX、clientY
							點擊位置距離當前body可視區域的x，y座標

							二、pageX、pageY
							對於整個頁面來說，包括了被捲去的body部分的長度

							三、screenX、screenY
							點擊位置距離當前電腦屏幕的x，y座標

							四、offsetX、offsetY
							相對於帶有定位的父盒子的x，y座標
						 */
						// clientX
						// clientWidth = width+左右padding
						// offsetWidth  offsetWidth = width + 左右padding + 左右boder
						// offsetLeft   元素本身到瀏覽器內側的距離
						// 當前元素 上邊框 外邊緣 到 最近的已定位父級（offsetParent） 上邊框 內邊緣的 距離。如果父
						// 級都沒有定位，則分別是到body 頂部 和左邊的距離
						// let obj = document.getElementsByClassName("active")[0];
						let disX1 = oEvent.clientX - el.offsetLeft;
						let disY1 = oEvent.clientY - el.offsetTop;
						document.onmousemove = function (ev) {
							let oEvent=ev ||  window.event
						  let l = oEvent.clientX - disX1;
						  let t = oEvent.clientY - disY1;
						  if (binding.modifiers.limit) {
								if(l < 0){
									l=0;
								}
								if(l>document.documentElement.clientWidth-el.offsetWidth){
									l=document.documentElement.clientWidth-el.offsetWidth
								}
							    if(t<0){
                                    t=0
								}
								if(t>document.documentElement.clientHeight-el.offsetWidth){
                                    t=document.documentElement.clientHeight-el.offsetWidth
								}	
							};
						  el.style.left = l + 'px';
						  el.style.top = t + 'px';
						};
						document.onmouseup = function () {
						  document.onmousemove = null;
						  document.onmouseup = null;
						};
						return false;
					  };
			}