需求:这里我们想要使这个盒子可以随意的上下左右拖动
需要我们在vue项目中创建一个自定义指定v-draggable,废话不多说直接上代码:
在main.js中
//引入Vue
import Vue from 'vue'
Vue.directive('draggable', {
bind: function (el, binding, vnode) {
var isDragging = false;
var offsetX = 0;
var offsetY = 0;
el.addEventListener('mousedown', function (event) {
isDragging = true;
offsetX = event.clientX - el.offsetLeft;
offsetY = event.clientY - el.offsetTop;
});
document.addEventListener('mousemove', function (event) {
if (isDragging) {
var left = event.clientX - offsetX;
var top = event.clientY - offsetY;
el.style.left = left + 'px';
el.style.top = top + 'px';
vnode.context.left = left;
vnode.context.top = top;
}
});
document.addEventListener('mouseup', function (event) {
isDragging = false;
});
}
});
然后直接在div标签上使用v-draggable就可以实现拖动了(注意给div设置宽高哦)
<div class="draggle-test" v-draggable></div>
希望本篇博客对你理解 JavaScript 中的作用域有所帮助,如果有任何疑问或者讨论,请随时在下方留言。谢谢阅读!