Vue Draggable 长按抖动效果实现指南

Vue Draggable 是一个基于 Vue.js 的可拖放列表组件，它提供了一些基本的拖放功能，如拖放排序、拖放复制等。如果要实现长按抖动效果，可以通过以下步骤来实现：

在 Vue Draggable 组件中添加一个长按事件，例如：

<draggable @dragstart='startDrag' @dragend='endDrag' @longpress='startShake' :list='list'>

在 Vue 实例中添加 startShake 方法，用于开始抖动：

methods: {
  startShake(event) {
    // 获取当前拖动的元素
    const el = event.item;
    // 添加抖动样式
    el.classList.add('shake');
  }
}

添加 CSS 样式，用于实现抖动效果：

.shake {
  animation: shake 0.5s;
}

@keyframes shake {
  0% { transform: rotate(0); }
  20% { transform: rotate(10deg); }
  40% { transform: rotate(-10deg); }
  60% { transform: rotate(10deg); }
  80% { transform: rotate(-10deg); }
  100% { transform: rotate(0); }
}

在 dragend 事件中，移除抖动样式：

methods: {
  endDrag(event) {
    // 获取当前拖动的元素
    const el = event.item;
    // 移除抖动样式
    el.classList.remove('shake');
  }
}

这样就可以实现长按抖动效果了。需要注意的是，如果要使用 longpress 事件，需要在 Vue Draggable 组件中添加一个自定义指令，例如：

directives: {
  longpress: {
    bind: function(el, binding, vNode) {
      // 定义长按时间
      let pressTimer = null;
      // 定义长按时间阈值
      const duration = binding.value || 500;

      // 当鼠标按下时开始计时
      el.addEventListener('mousedown', () => {
        pressTimer = setTimeout(() => {
          // 触发长按事件
          binding.expression && binding.value();
        }, duration);
      });

      // 当鼠标松开时取消计时
      el.addEventListener('mouseup', () => {
        clearTimeout(pressTimer);
      });
    }
  }
}

然后就可以在 Vue Draggable 组件中使用 longpress 指令了：

<draggable v-longpress='startShake' :list='list'>