vue draggable 长按事件

Vue Draggable 提供了一个事件 @dragging，可以在拖动时触发。那么可以通过判断拖动的时间来模拟长按事件。

示例代码：

<template>
  <div>
    <div
      v-for="(item, index) in items"
      :key="item.id"
      :style="{ transform: `translate(${item.x}px, ${item.y}px)` }"
      v-draggable="{ onEnd: handleDragEnd, onDragging: handleDragging }"
    >
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'item 1', x: 0, y: 0 },
        { id: 2, name: 'item 2', x: 100, y: 100 },
        { id: 3, name: 'item 3', x: 200, y: 200 },
      ],
      startDragTime: 0,
      isDragging: false,
    };
  },
  methods: {
    handleDragging() {
      if (!this.isDragging) {
        this.startDragTime = Date.now();
        this.isDragging = true;
      }
      const dragTime = Date.now() - this.startDragTime;
      if (dragTime > 500) { // 判断长按时间为 500ms
        console.log('长按事件');
      }
    },
    handleDragEnd() {
      this.isDragging = false;
    },
  },
};
</script>