运用场景：table的拖动排序（表格拖拽），类似于低代码平台自定义表单的拖拽（多列拖拽）
介绍：
vuedraggable: 是一款基于Sortable.js实现的vue拖拽插件。支持移动设备、拖拽和选择文本、智能滚动，可以在不同列表间拖拽、不依赖jQuery为基础、vue 2过渡动画兼容、支持撤销操作，总之是一款非常优秀的vue拖拽组件。
安装：
yarn add vuedraggable
npm i -S vuedraggable
使用：
// 引入
import draggable from "vuedraggable";
// 组件注册
export default {
components: {
draggable
},
};
// 使用
<draggable></draggable>
项目实践：
运用场景：table的拖动排序（表格拖拽），类似于低代码平台自定义表单的拖拽（多列拖拽）
介绍：
vuedraggable: 是一款基于Sortable.js实现的vue拖拽插件。支持移动设备、拖拽和选择文本、智能滚动，可以在不同列表间拖拽、不依赖jQuery为基础、vue 2过渡动画兼容、支持撤销操作，总之是一款非常优秀的vue拖拽组件。
安装：
yarn add vuedraggable
npm i -S vuedraggable
使用：
// 引入
import draggable from "vuedraggable";
// 组件注册
export default {
components: {
draggable
},
};
// 使用
<draggable></draggable>
项目实践：
1.table的拖拽排列
先封装一个draggable的组件：
<template>
<Draggable tag="tbody" :list="data.dataSource" animation="500" class="drag" @change="onChange">
<slot></slot>
</Draggable>
</template>
<script>
import Draggable from 'vuedraggable'
export default {
name: 'CustomWrapper',
components: {
Draggable
},
inject: ['data'],
data() {
return {}
},
methods: {
onChange(evt) {
let data = this.data.dataSource
const index = evt.moved.newIndex
// 将你想要的值 传给父组件
this.data.handleDrag({
id: data[index].id,
before: data[index - 1] ? data[index - 1].id : '',
after: data[index + 1] ? data[index + 1].id : ''
})
}
}
}
</script>
<style lang="less" scoped>
.drag {
/deep/ tr {
cursor: move;
}
}
</style>
再抛出一个函数，用于返回移动的前后的值
table页面
<a-table :columns="columns" :data-source="dataSource" :components="components">
<a slot="name" slot-scope="text">{{ text }}</a>
<span slot="customTitle"><a-icon type="smile-o" /> Name</span>
<span slot="tags" slot-scope="tags">
<a-tag v-for="tag in tags" :key="tag" :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'">
{{ tag.toUpperCase() }}
</a-tag>
</span>
<span slot="action" slot-scope="text, record">
<a>Invite 一 {{ record.name }}</a>
<a-divider type="vertical" />
<a>Delete</a>
<a-divider type="vertical" />
<a class="ant-dropdown-link"> More actions <a-icon type="down" /> </a>
</span>
</a-table>
<!--引入组件-->
import CustomWrapper from './CustomWrapper'
data(){
<!--将组件定义一下-->
this.components = {
body: {
wrapper: CustomWrapper
}
}
return{}
}
method: {
handleDrag(e) {
// 接收到拖拽子组件传来的值，得到你需要的值 和后台进行接口操作
console.log(e, 'e')
}
}
便可完成table任意的移动
2.多列的拖拽
自定义表单的拖拽。此种属于多列拖拽
需要group属性
从左侧拖到中间则需要draggable的group name相同 且我的需求是从左侧复制拖拽到中间内容区，且中间内容区只可在本区域内拖动
既左侧需要：pull: clone
左侧：
<draggable
tag="ul"
:list="list.fields"
v-bind="{
group: { name: 'form-draggable', pull: 'clone', put: false },
sort: false,
animation: 180
}"
:clone="clone"
>
<li v-for="(val, index) in list" :key="index" :class="layout" @click="$emit('handleListPush', val)">
<i :class="`iconfont icon-${val.icon}`"></i>
<span>{{ val.label }}</span>
</li>
</draggable>
中间：
<draggable
:list="list"
class="draggable-box"
v-bind="{
group: 'form-draggable',
ghostClass: 'moving',
animation: 180
}"
:emptyInsertThreshold="500"
@add="deepClone"
>
<transition-group tag="div" name="list" class="list-main">
<!--具体的字段展示组件-->
<form-layout
v-for="(item, index) in list"
:key="item.column_name"
:record="item"
:index="index"
v-bind="$attrs"
:style="{ width: item.col_width ? (item.col_width / 12) * 100 + '%' : '100%', height: '100%' }"
v-on="$listeners"
></form-layout>
</transition-group>
</draggable>
这样即可实现拖拽
！！！ 在这里有遇到一个坑：
当中间内容区域为空是，无法从左侧拖到中间区域，此时需要:emptyInsertThreshold="500" 即可实现拖拽 大家一定要注意哦~~~~
