vue中自定义拖拽指令
指令(局部指令）
directives: {
drag(el, bindings) {
el.onmousedown = function (e) {
var disx = e.pageX - el.offsetLeft;
var disy = e.pageY - el.offsetTop;
document.onmousemove = function (e) {
el.style.left = e.pageX - disx + "px";
el.style.top = e.pageY - disy + "px";
};
document.onmouseup = function () {
document.onmousemove = document.onmouseup = null;
};
};
},
},
使用
html
<div v-drag class="test"></div>
css
test{
width: 100px;
height: 100px;
background: red;
position: fixed;
left: 0px;
top: 20%;
z-index: 12;
}
