sortable事件监听怎么设置

avatar
作者
筋斗云
阅读量:5

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

广告一刻

为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!