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

要实现小方块拖拽效果，可以自定义一个指令并使用Vue的事件绑定和DOM操作来实现。

以下是实现小方块拖拽效果的代码示例：

<template>
  <div class="drag-box" v-draggable>拖拽我</div>
</template>

<script>
export default {
  directives: {
    draggable: {
      bind(el) {
        let isDragging = false;
        let currentX;
        let currentY;
        let initialX;
        let initialY;
        let xOffset = 0;
        let yOffset = 0;

        el.addEventListener("mousedown", dragStart);
        el.addEventListener("mouseup", dragEnd);
        el.addEventListener("mousemove", drag);

        function dragStart(e) {
          initialX = e.clientX - xOffset;
          initialY = e.clientY - yOffset;

          if (e.target === el) {
            isDragging = true;
          }
        }

        function dragEnd(e) {
          initialX = currentX;
          initialY = currentY;

          isDragging = false;
        }

        function drag(e) {
          if (isDragging) {
            e.preventDefault();

            currentX = e.clientX - initialX;
            currentY = e.clientY - initialY;

            xOffset = currentX;
            yOffset = currentY;

            setTranslate(currentX, currentY, el);
          }
        }

        function setTranslate(xPos, yPos, el) {
          el.style.transform = `translate3d(${xPos}px, ${yPos}px, 0)`;
        }
      },
    },
  },
};
</script>

<style>
.drag-box {
  width: 100px;
  height: 100px;
  background-color: red;
  color: white;
  text-align: center;
  line-height: 100px;
  cursor: move;
}
</style>

在上面的代码中，我们定义了一个名为`draggable`的指令，并在绑定时添加了事件监听器以处理拖动过程中的鼠标事件。在`dragStart`函数中，我们记录了初始的鼠标坐标和元素的偏移量，并设置`isDragging`变量为`true`。在`dragEnd`函数中，我们将元素的位置更新为当前位置，并将`isDragging`变量设置为`false`。在`drag`函数中，我们计算当前鼠标的位置，并根据偏移量以及当前位置计算出元素应该被移动到的位置，并更新元素的位置。

最后，我们在模板中使用`v-draggable`指令绑定到小方块元素上，这样就实现了小方块的拖拽效果。