sortable事件监听怎么设置

在Vue中使用sortable插件来实现拖拽排序时，可以通过在组件中添加sortable的事件监听方法来设置事件监听。以下是一个简单的示例：

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

<script>
import Sortable from 'sortablejs';

export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
      ]
    };
  },
  mounted() {
    const sortableList = new Sortable(this.$refs.sortableList, {
      onEnd: (evt) => {
        // evt.oldIndex is the old index of the dragged element
        // evt.newIndex is the new index of the dragged element
        // You can update the items array based on these indexes
      }
    });
  }
};
</script>

在上面的示例中，我们在组件的mounted生命周期钩子中实例化了Sortable，并设置了onEnd事件监听方法。在onEnd事件中，我们可以获取到被拖拽元素的旧索引和新索引，并根据这些索引更新items数组。