Vue draggable 如何实现长按抖动效果详细教程

Vue Draggable 是一个 Vue.js 组件，它提供了一个可拖拽的列表，可以方便地实现拖拽排序、拖拽删除等功能。在使用 Vue Draggable 时，有时需要实现长按抖动效果，以提醒用户该元素可以拖拽。

本文将介绍如何使用 Vue Draggable 实现长按抖动效果，步骤如下：

创建一个 Vue Draggable 组件

首先，需要安装 Vue Draggable 组件，可以使用 npm 进行安装：

npm install --save vue-draggable

然后，在 Vue 组件中引入并注册该组件：

<template>
  <draggable v-model="list" :options="options">
    <div v-for="(item, index) in list" :key="index">
      {{ item }}
    </div>
  </draggable>
</template>

<script>
  import draggable from 'vuedraggable'

  export default {
    components: {
      draggable
    },
    data () {
      return {
        list: ['item 1', 'item 2', 'item 3'],
        options: {}
      }
    }
  }
</script>

以上代码中，<draggable> 标签用于包含可拖拽的列表，通过 v-model 绑定 list 数组，可以实现拖拽排序功能。<div> 标签用于渲染列表项，通过 v-for 循环遍历 list 数组，绑定每个列表项的值。

添加抖动效果

要实现长按抖动效果，需要使用 CSS 实现动画。在 Vue 组件中，可以使用 @mousedown 事件监听鼠标按下事件，当鼠标按下时，添加一个 is-dragging 类名，用于触发抖动动画。同时，使用 @mouseup 事件监听鼠标松开事件，当鼠标松开时，移除 is-dragging 类名，停止抖动动画。

在 Vue 组件中，可以使用 @mousedown 和 @mouseup 事件，实现长按抖动效果，代码如下：

<template>
  <draggable v-model="list" :options="options">
    <div v-for="(item, index) in list" :key="index"
         @mousedown="startShake($event)"
         @mouseup="stopShake($event)">
      {{ item }}
    </div>
  </draggable>
</template>

<script>
  import draggable from 'vuedraggable'

  export default {
    components: {
      draggable
    },
    data () {
      return {
        list: ['item 1', 'item 2', 'item 3'],
        options: {}
      }
    },
    methods: {
      startShake (event) {
        event.currentTarget.classList.add('is-dragging')
      },
      stopShake (event) {
        event.currentTarget.classList.remove('is-dragging')
      }
    }
  }
</script>

<style>
  .is-dragging {
    animation: shake 0.5s ease-in-out infinite;
  }

  @keyframes shake {
    0% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
    100% { transform: translateX(0); }
  }
</style>

以上代码中，使用 @mousedown 和 @mouseup 事件监听鼠标按下和松开事件，分别调用 startShake 和 stopShake 方法。在 startShake 方法中，使用 event.currentTarget 获取当前元素，然后添加 is-dragging 类名，触发抖动动画。在 stopShake 方法中，同样使用 event.currentTarget 获取当前元素，然后移除 is-dragging 类名，停止抖动动画。

同时，在 CSS 样式表中，定义了 is-dragging 类名的抖动动画。使用 @keyframes 定义了 shake 动画，通过 transform 属性实现元素的水平移动，从而实现抖动效果。

到此为止，就成功实现了长按抖动效果。完整的代码如下：

<template>
  <draggable v-model="list" :options="options">
    <div v-for="(item, index) in list" :key="index"
         @mousedown="startShake($event)"
         @mouseup="stopShake($event)">
      {{ item }}
    </div>
  </draggable>
</template>

<script>
  import draggable from 'vuedraggable'

  export default {
    components: {
      draggable
    },
    data () {
      return {
        list: ['item 1', 'item 2', 'item 3'],
        options: {}
      }
    },
    methods: {
      startShake (event) {
        event.currentTarget.classList.add('is-dragging')
      },
      stopShake (event) {
        event.currentTarget.classList.remove('is-dragging')
      }
    }
  }
</script>

<style>
  .is-dragging {
    animation: shake 0.5s ease-in-out infinite;
  }

  @keyframes shake {
    0% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
    100% { transform: translateX(0); }
  }
</style>