vue draggable 拖拽事件

Vue Draggable 是一个 Vue.js 组件，它提供了一种简单的方法来实现拖放操作。该组件允许你在可拖拽的元素上监听拖拽事件，并在元素被拖拽时触发相应的事件。

Vue Draggable 组件提供了以下事件：

start：拖拽开始时触发的事件。
drag：拖拽过程中触发的事件。
end：拖拽结束时触发的事件。
add：当拖拽的元素被添加到目标区域时触发的事件。
remove：当拖拽的元素从目标区域中移除时触发的事件。
update：当拖拽的元素在目标区域中移动时触发的事件。

你可以使用这些事件来实现各种功能，例如根据拖拽的位置更新元素的样式或位置，或者在拖动元素时更新应用程序的状态。

以下是一个简单的示例，演示如何使用 Vue Draggable 组件监听拖拽事件：

<template>
  <div>
    <div v-for="(item, index) in items" :key="item.id" class="draggable-item" v-draggable>
      {{ item.name }}
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: {
    draggable
  },
  data () {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.$refs.draggable.$on('add', ({ element, newIndex }) => {
        console.log(`Element ${element.innerHTML} added at position ${newIndex}`)
      })
    })
  }
}
</script>

在上面的示例中，我们使用 v-draggable 指令将每个可拖拽的元素绑定到 Vue Draggable 组件上。我们还监听了 add 事件，在拖拽元素被添加到目标区域时输出一条消息。