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数组。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！