Usage scenario: Table drag sort (table drag), similar to low code platform custom form drag (multi-column drag)
Introduction:
Vuedraggable: is a vue drag-and-drop plugin based on sortable.js. Mobile device support, drag and drop and select text, intelligent scrolling, drag and drop between lists, no jQuery based, VUE 2 transition animation compatibility, undo support, all in all, a very good vue drag component.
Installation:
yarn add vuedraggable
npm i -S vuedraggable
Copy the code
Use:
// import draggable from "vuedraggable"; Export default {components: {draggable},}; / / use the < draggable > < / draggable >Copy the code
Project Practice:
Usage scenario: Table drag sort (table drag), similar to low code platform custom form drag (multi-column drag)
Introduction:
Vuedraggable: is a vue drag-and-drop plugin based on sortable.js. Mobile device support, drag and drop and select text, intelligent scrolling, drag and drop between lists, no jQuery based, VUE 2 transition animation compatibility, undo support, all in all, a very good vue drag component.
Installation:
yarn add vuedraggable
npm i -S vuedraggable
Copy the code
Use:
// import draggable from "vuedraggable"; Export default {components: {draggable},}; / / use the < draggable > < / draggable >Copy the code
Project Practice:
1. Drag and drop arrangement of table
Encapsulate a draggable component:
<template>
<Draggable tag="tbody" :list="data.localDataSource" 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.localDataSource
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>
Copy the code
Throw a function that returns the value before and after the move
The table page
<a-table :columns="columns" :data-source="data" :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 one {{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.component.ponents = {body: {wrapper: CustomWrapper}} return{}}Copy the code
The drag is complete
2. Multi-column drag and drop
Custom form drag and drop. This is multi-column drag
You need the group attribute
Dragging from the left to the middle requires the same group name of the draggable, and my requirement is to copy and drag from the left to the middle content area, and the middle content area can only be dragged within this area
Both the left side needs to: 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>Copy the code
<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>Copy the code
This enables drag and drop
!!!!!!!!! There is a pit encountered here:
EmptyInsertThreshold =”500″ ~~~~