/*
* 创建自定义的指令
* */
Vue.directive('drag', {
// 当指令绑定到元素上的时候执行
bind(el, binding) {
// console.log('bind');
// 当前指令绑定的dom元素
//console.log(el);
// 指令传入的参数、修饰符、值 v-指令名称:参数.修饰符=值
// console.log(binding)
el.onmousedown = function(e) {
let disX = e.clientX - el.offsetLeft;
let disY = e.clientY - el.offsetTop;
document.onmousemove = function(e) {
let L = e.clientX - disX;
let T = e.clientY - disY;
if (binding.modifiers.limit) { //v-drag.limit 限制范围
if (L < 0) {
L = 0;
}
}
el.style.left = L + 'px';
el.style.top = T + 'px';
};
document.onmouseup = function() {
document.onmousemove = null;
};
return false;
}
}
});
new Vue({
el: '#app'
});
<div id="app">
<div id="box1" v-drag.limit></div>
<div id="box2" v-drag></div>
</div>
#box1 {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
background: red;
}
#box2 {
position: absolute;
left: 300px;
top: 0;
width: 100px;
height: 100px;
background: green;
}