vue拖拽方法，有边界控制，带吸附

Vue拖拽有很多方法，今天我用了指令去实现

1 创建公共指令，全局注册方式，也可以局部指令

gap是附件值，也可以根据具体情况来设置

// v-drag
export default {
	// 当被绑定的元素插入到 DOM 中时……
	inserted(el) {
		let gap = 10 //缝隙：小于缝隙时，则吸附
		let parent = el.offsetParent
		
		el.onmousedown = function(event) {
			var eleEvent = event || window.event //event的兼容,同时得到clientX,的值
			var x = eleEvent.clientX - el.offsetLeft;
			var y = eleEvent.clientY - el.offsetTop;
			var left = 0;
			var top = 0;

			var boxer = document.querySelector(".boxer")
			document.onmousemove = function(eve) {
				left = eve.clientX - x
				top = eve.clientY - y

				// 左
				if (left <= gap) {
					left = 0
				}

				//右
				if (left >= parent.offsetWidth - el.offsetWidth - gap) { //大于整个盒子的宽度-小盒子的宽度
					left = parent.offsetWidth - el.offsetWidth
				}

				// 上
				if (top <= gap) {
					top = 0
				}

				// 下
				if (top >= parent.offsetHeight - el.offsetHeight - gap) {
					top = parent.offsetHeight - el.offsetHeight
				}

				el.style.left = left + "px";
				el.style.top = top + "px";

			};
			document.onmouseup = function() {
				document.onmousemove = null;
				document.onmouseup = null;
			};
		};
	}
}

2 创建元素

<div class="panel-center oper">
				<div id="darg" >
					<div id="darg1" v-drag></div>
				</div>
				
				<div class="box-darg" v-drag>

				</div>
			</div>

css如下 ，注意移动的话必须设置position  

.panel-center {
				flex: 1;
				border: 1px solid #000088;
				margin: 0 10px;
				overflow: hidden;
				position: relative;
				
				.box-darg {
					width: 100px;
					height: 100px;
					background: yellowgreen;
					position: absolute;
					top: 0;
					left: 0;
				}
				#darg {
					width: 300px;
					height: 300px;
					background: red;
					position: absolute;
					top: 100px;
					left: 100px;
				}
				
				#darg1{
					width: 50px;
					height: 50px;
					background: blue;
					position: absolute;
					top: 0;
					left: 0;
				}
			}

示意图