preface

When we use Element El-Table, we need to use drag and drop sorting. Although el-Table supports column sorting, when we drag and drop sorting, existing components cannot meet this requirement.

At this time we need to introduce a powerful JS drag library: SortableJS

The drag-and-drop library is simple and easy to use. The official website provides a demo of the drag-and-drop effects we commonly use. Below, I will mainly record how to use it quickly in our project.

A, install,

There are three installation modes:

1. NPM installation

npm install sortablejs --save
Copy the code

2. Bower installation

bower install --save sortablejs
Copy the code

3. Script introduction

<script src=".. /.. /js/Sortable.min.js"></script>
Copy the code

Second, the use of

Install sorTableJS locally in your project:

NPM install sortablejs --saveCopy the code

2, Then introduce sorTablejs in the.vue file where you want to implement the table drag:

import Sortable from 'sortablejs'
Copy the code

Vue mounted specifies whether to initialize the el-table in templete. Mounted.

Example:

<template>
    <el-table :data="tableData">
        <el-table-column prop="..." label="..."></el-table-column>
    </el-table>
</template>

<script>
import Sortable from "sortablejs";

export default {
    data() {
        return {
            tableData: [...],
        };
    },
    methods: {
		initSort() {
	      const el = document.querySelectorAll('.el-table__body-wrapper > table > tbody') [0]
	      // const sortable = new Sortable(el, options);
	      // Configure options based on site requirements
	      const sortable = new Sortable(el, {
	        onEnd: (evt) = > { // Listen for the drag end event
	          console.log(this) This is the current Vue context
	          console.log(evt.oldIndex) // The order in which the current row is dragged
	          console.log(evt.newIndex) // The order in which the current row is dragged
	          // Here we can write the logic code we need to pass to the background
	          // evt.oldIndex is the row currently dragged, and evt.newIndex is the position to which it was placed.
	          // We have evt.oldIndex and evt.newIndex as indexes, and we can find two records according to the data Array bound to the table. You can now operate on the data.}})}},mounted() {
        this.initSort(); }};</script>
Copy the code

After the above configuration is complete, we debug the table in the page. Drag the mouse to move the table line to another line (below), which shows that the function is realized.

Options configuration items and event methods

const sortable = new Sortable(el, options);
Copy the code

Options is the SORTable configuration item. For details, see the SORTable configuration document

Sortable configuration items, events, event methods, objects, etc. The official website is very detailed, there are complex configuration requirements, you can go to the official website to check oh.

Four,

For simple drag-and-drop requirements, you only need to look at the demo above. There are many examples of complex effects such as multi-list drag-and-drop, cloning (copying nodes by dragging and dropping), and sorting and filtering.

This requirement is easily implemented with the drag-and-drop library.

Welcome one key three connect oh ~

Guys, come on!!