Vue使用自定义指令实现盒子拖动

html

<div id="app">
  <div id="box" v-draggable>
    Drag me
  </div>
</div>

js

// 注册全局自定义指令 v-draggable
Vue.directive('draggable', {
  // 指令的定义
  bind: function(el, binding, vnode) {
    // 记录初始位置
    var startX, startY;
 
    // 鼠标按下事件监听
    el.addEventListener('mousedown', function(e) {
      // 记录初始位置
      startX = e.clientX - el.offsetLeft;
      startY = e.clientY - el.offsetTop;
 
      // 添加鼠标移动和松开事件监听
      document.addEventListener('mousemove', moveHandler);
      document.addEventListener('mouseup', upHandler);
    });
 
    // 定义鼠标移动处理函数
    function moveHandler(e) {
      // 计算移动距离
      var moveX = e.clientX - startX;
      var moveY = e.clientY - startY;
 
      // 更新盒子位置
      el.style.left = moveX + 'px';
      el.style.top = moveY + 'px';
    }
 
    // 定义鼠标松开处理函数
    function upHandler() {
      // 移除鼠标移动和松开事件监听
      document.removeEventListener('mousemove', moveHandler);
      document.removeEventListener('mouseup', upHandler);
    }
  }
});
 
// 创建Vue实例
var app = new Vue({
  el: '#app',
});