Vue.Draggable/SortableJS 的排序功能，在VUE中的使用

最新推荐文章于 2024-02-08 15:15:22 发布

weixin_33694172

最新推荐文章于 2024-02-08 15:15:22 发布

阅读量562

点赞数

文章标签： javascript json git ViewUI

本文介绍了一个基于Vue的拖拽排序插件，该插件使用Sortable.js实现，并提供了详细的安装和使用步骤。通过简单的代码示例展示了如何在Vue项目中引入并使用此插件进行元素的拖拽排序。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

此插件git: https://github.com/SortableJS/Vue.Draggable

基于Sortable.js http://www.cnblogs.com/xiangsj/p/6628003.html

使用方法：

一. 下载包：cnpm install vuedraggable -S (后加-S 保存配置到package.json)

二. 使用：

引入依赖，注册组件

 import draggable from 'vuedraggable'
  ...
  export default {
        components: {
            draggable,
        },
  ...

html:

<draggable v-model="myArray" :options="{group:'people'}" @start="drag=true" @end="drag=false">
   <div v-for="element in myArray" :key="element.id">{{element.name}}</div>
</draggable>

data:

data () { 
    return {
　　　　//测试用
      myArray: [{
        id:"1",
        name:"aaaaaaaaaaaaa",        
      },{
        id:"2",
        name:"bbbbbbbbbbbbb",        
      },{
        id:"3",
        name:"ccccccccccccccc",        
      }]     
    }
  },

如上图，拖拽排序实现了，

三. 拓展使用：

分组排序和部分手势:options="{group:'group01'}"，拖拽中，拖拽结束，及进行排序后的存储（按索引）...

<draggable v-model="myArray" :options="{group:'group01', handle:'.handle'}" :move="getdata" @update="datadragEnd">
        <transition-group>
            <div v-for="element in myArray" :key="element.id">
                {{element.name}}

 </div>
 </transition-group>

</draggable> methods: { getdata (evt) { console.log(evt.draggedContext.element.id) }, datadragEnd (evt) { console.log('拖动前的索引 :' + evt.oldIndex) console.log('拖动后的索引 :' + evt.newIndex) console.log(this.tags) } }