自定义拖拽指令

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;
					  };
			}