VueDraggable 是一个专门解决拖拽排序和拖拽分组的前端开源代码库。
这是我在项目中用过的最好的拖拽排序解决方案了。
Vue.Draggable 几乎满足拖拽功能的所有需求,支持 cdn 直接引入js文件,支持 Vue cli 方式引入。官网有很详细的文档以及非常充足的代码例子,上手非常容易。
使用步骤如下:
- npm i -S vuedraggable
在需要用的页面中引入
<template> <div> <!--使用draggable组件--> <draggable v-model="myArray" chosenClass="chosen" forceFallback="true" group="people" animation="1000" @start="onStart" @end="onEnd"> <transition-group> <div class="item" v-for="element in myArray" :key="element.id">{{element.name}}</div> </transition-group> </draggable> </div> </template> <style scoped> /*被拖拽对象的样式*/ .item { padding: 6px; background-color: #fdfdfd; border: solid 1px #eee; margin-bottom: 10px; cursor: move; } /*选中样式*/ .chosen { border: solid 2px #3089dc !important; } </style> <script> //导入draggable组件 import draggable from 'vuedraggable' export default { //注册draggable组件 components: { draggable, }, data() { return { drag:false, //定义要被拖拽对象的数组 myArray:[ {people:'cn',id:1,name:'www.itxst.com'}, {people:'cn',id:2,name:'www.baidu.com'}, {people:'cn',id:3,name:'www.taobao.com'}, {people:'us',id:4,name:'www.google.com'} ] }; }, methods: { //开始拖拽事件 onStart(){ this.drag=true; }, //拖拽结束事件 onEnd() { this.drag=false; }, }, };
这是Vue.Draggable的官方文档地址,内容较为详细。
http://www.itxst.com/vue-drag...
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。