vue 如何实现拖动：vue-draggable

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配置项

事件