Vue form drag and drop

Business requirements:

Because the data presentation uses elementUI’s Table for the data presentation, you now need to sort the form by dragging and dropping the form. At the same time, change the order of data in the form dynamically. Access to a lot of data, also read a lot on making others encapsulated form plug-in, but in the end is not what you want, the main reason is that the background management system page, the same window may involve more than one form drag and drop, at the same time, using partial plugin is likely to lead to data update not in time, or the next at the time of use, No matter how much data is assigned, the update is not successful, resulting in the final rendering of the form to be dragged sometimes data, sometimes no data, the experience is not good.

Solution:

Selected a lot of packaged plug-ins, did not achieve their desired effect. I happened to see someone suggest using native drag and drop to solve the problem of form tray drag and drop sorting. Finally, I used sorTableJS combined with native DOM node operation to cut and splice form element data, and finally achieved the ideal effect.

Operation steps:

• Start by installing the sorTableJS plugin

yarn add sortablejs
Copy the code

• Reference the sorTableJS plug-in (used globally, or within a component)

import Sortable from "sortablejs";
Copy the code

• Table related code

<template>
	<div class="drag_table">
		<! -- row-key specifies the sort parameter by index.
		<! Highlight-current-row: Highlight the selected line -->
		<el-table :data="dragList" ref="dragTable" row-key="id" border stripe highlight-current-row>
			<el-table-column label="Serial number" type="index" width="50" align="center"></el-table-column>
			<el-table-column label="ID" prop="id" align="center"></el-table-column>
			<el-table-column label="Name" prop="name" show-overflow-tooltip></el-table-column>
			<! -- Gender judgment, using prop property -->
			<el-table-column label="Gender" prop="sex">
				<template slot-scope="scope">
					<el-tag>{{ scope.row.sex === 0 ? 'Female' : 'male'}}</el-tag>
				</template>
			</el-table-column>
			<! Remove the form element from the sorted form
			<el-table-column label="Operation" width="66" align="center">
				<template slot-scope="scope">
					<el-button type="danger" icon="el-icon-delete" plain @click="delItem(scope.$index)">remove</el-button>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>
Copy the code

• JavaScript logic code

// Introduce sort plugins
import Sortable from "sortablejs";

export default {
	name: "DragTable".data() {
		return {
			sortable: null /* Form drag */ ,
			dragList: [{
				id: 1.name: 'Joe'.sex: 1
			}, {
				id: 2.name: 'bill'.sex: 0
			}, {
				id: 3.name: 'Cathy'.sex: 0
			}, {
				id: 4.name: 'Daisy'.sex: 1}}},mounted() {
		// Wait for data rendering to complete before initializing the drag-and-drop form
		this.$nextTick(() = > {
			this.initSortTable()
		})
	},
	methods: {
		// Remove data
		delItem(index) {
			this.dragList.splice(index, 1)},// Initializes the drag and drop form
		initSortTable() {
			// const elTag = this.$refs['dragTable'].$el.querySelectorAll(".el-table__body-wrapper > table > tbody")[0];

			/ / for el - table
			const tableTag = this.$refs['dragTable'].$el;

			// Get the tbody node
			const elTbody = tableTag.querySelectorAll(".el-table__body-wrapper > table > tbody") [0];
			// Drag sort
			this.sortable = Sortable.create(elTbody, {
				onEnd: evt= > {
					const tempIndex = this.dragList.splice(evt.oldIndex, 1) [0];
					this.dragList.splice(evt.newIndex, 0, tempIndex); }}); }}},Copy the code