vue-draggable

官方文档：传送门

特点：

• 支持触摸设备（如vue项目的移动端开发Quasar）
• 支持拖拽和选择文本
• 支持不同列表之间的拖拽
• 视图模型的同步刷新
• 与vue2的过渡动画（transition-group）兼容
• 有很多监听函数，当需要完全控制时，可以抛出所有变化
• 可以和现有的UI组件相兼容

使用

<draggable v-model="specimenTableColumnsList" animation="300"><div v-for="(item, index) of specimenTableColumnsList" :key="index" v-show="!item.fixed" class="table-typeset-model">{{ item.title }}</div>
</draggable>

import draggable from 'vuedraggable'
export default {name: "SearchGroup",data() { return {specimenTableColumnsList: [{title: '标本条码', fixed: 'left', ...},{title: '当前箱码', ...}, {title: '合箱标记', ...}, {...}]}},components: { draggable }
}

属性及事件

draggable标签的属性

options配置项

事件