sortable事件監(jiān)聽怎么設(shè)置

小樊
118
2024-06-27 12:04:22
欄目: 編程語言

在Vue中使用sortable插件來實(shí)現(xiàn)拖拽排序時(shí)，可以通過在組件中添加sortable的事件監(jiān)聽方法來設(shè)置事件監(jiān)聽。以下是一個(gè)簡單的示例：

<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>

在上面的示例中，我們?cè)诮M件的mounted生命周期鉤子中實(shí)例化了Sortable，并設(shè)置了onEnd事件監(jiān)聽方法。在onEnd事件中，我們可以獲取到被拖拽元素的舊索引和新索引，并根據(jù)這些索引更新items數(shù)組。

0 踩