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″ ~~~~