vue自定义指令怎么实现小方块拖拽效果

要实现小方块的拖拽效果，可以通过自定义指令来实现。以下是实现步骤：

1. 在指令中绑定拖拽元素的事件监听器，包括mousedown、mousemove和mouseup事件。

2. 在mousedown事件中记录鼠标按下时的位置和拖拽元素的初始位置。

3. 在mousemove事件中计算鼠标移动的距离，并将拖拽元素的位置进行相应的调整。

4. 在mouseup事件中清除事件监听器。

下面是一个实现小方块拖拽效果的自定义指令的示例代码：

// 注册自定义指令
Vue.directive('drag', {
  bind: function (el, binding, vnode) {
    // 记录拖拽元素的初始位置
    var initX, initY, startX, startY;
  
    // 鼠标按下时的事件处理函数
    function mouseDownHandler(e) {
      initX = el.offsetLeft;
      initY = el.offsetTop;
      startX = e.clientX;
      startY = e.clientY;

      // 添加事件监听器
      document.addEventListener('mousemove', mouseMoveHandler);
      document.addEventListener('mouseup', mouseUpHandler);
    }

    // 鼠标移动时的事件处理函数
    function mouseMoveHandler(e) {
      var deltaX = e.clientX - startX;
      var deltaY = e.clientY - startY;

      // 计算拖拽元素的新位置
      var newX = initX + deltaX;
      var newY = initY + deltaY;

      // 设置拖拽元素的新位置
      el.style.left = newX + 'px';
      el.style.top = newY + 'px';
    }

    // 鼠标松开时的事件处理函数
    function mouseUpHandler() {
      // 移除事件监听器
      document.removeEventListener('mousemove', mouseMoveHandler);
      document.removeEventListener('mouseup', mouseUpHandler);
    }

    // 添加鼠标按下事件监听器
    el.addEventListener('mousedown', mouseDownHandler);
  }
});

使用该指令时，只需要在需要实现拖拽效果的小方块元素上添加v-drag指令即可：

<div v-drag class="drag-box"></div>