Shulou(Shulou.com)06/01 Report--

This article will explain in detail about the drag plug-in sortable.js how to achieve el-table table drag effect, the editor thinks it is very practical, so share it with you as a reference, I hope you can get something after reading this article.

Problem description

Sortable.js is an excellent js drag-and-drop library. Because it is written by native js, it has good performance and supports mobile devices.

Case 1: simple drag and drop

Effect picture

Code attached

For understanding, look at the notes. Just copy and paste if you run it.

Sortable.js drag example # wrapBox {width: 360px; / * the height of the drag container is supported by the height of the drag item * / height: auto;} # wrapBox div {padding: 8px; background-color: # fdfdfd; border: solid 1px # eee Margin-bottom: 10px; / * add the mouse hovering style to the mobile style, otherwise it will not look good * / cursor: move; font-size: 13px;} / * set the style when the mouse is pressed, and add a better look * / # wrapBox div:active {background-color: # eee } priority debit order: industrial and Commercial Bank of China, Construction Bank of China, Agricultural Bank of China, Bank of Communications / / first step, get the drag container var wrap = document.getElementById ('wrapBox') / / the second step is to set the drag rule var rules = {animation: 500, / / the animation duration of the position change of the element when dragging, / / the callback function onEnd: function (event) {console.log ('parameter is the drag event object', event) / / get the order of the position of each item in the dragged container var arr = sortable.toArray (); console.log ('sorting position', arr);},}; / / step 3, initialize-- > add the drag rule var sortable = Sortable.create (wrap, rules) to the dragged container / * the plug-in comes with the method: * 1. Sortable.toArray () gets an array of id attributes of each serialized item element * 2. Sortable.create (wrap, rules) add drag rules to the drag container * * / case 2 el-table table drag

Here is a detail, that is, when the header data is dragged, it may lead to incorrect rendering data. Some bloggers create two header array data, which is actually a solution to the problem. However, in my humble opinion, there is a little trouble, in fact, a header array of data is fine. As long as it is cleared in time, the value can be re-assigned.

Effect picture

Code attached

Vue is used here, so download cnpm install sortablejs-- save

The code can be copied and pasted directly to see the effect diagram. Please see the notes for use.

Header data {{tableHeader}} Table body data {{tableBody}} / / introduced into the sortablejs plug-in, drag and drop mainly depends on this plug-in import Sortable from "sortablejs" Export default {data () {return {/ / header data tableHeader: [{label: "name", prop: "name",}, {label: "age", prop: "age",}, {label: "hometown", prop: "home" }, {label: "hobby", prop: "hobby",},], / / form data tableBody: [{id: "1", name: "Sun WuKong", age: 500,500, home: "Huaguoshan", hobby: "eat peaches" }, {id: "2", name: "Zhu Bajie", age: 88, home: "Gao Laozhuang", hobby: "eating steamed buns",}, {id: "3", name: "Sha Wujing", age: 1000 Home: "Tongtian River", hobby: "Swimming",}, {id: "4", name: "Tang Monk", age: 99999, home: "Dongtu Datang", hobby: "chanting Sutra",},],} }, mounted () {/ / column drag initialization this.columnDropInit (); / / row drag initialization this.rowDropInit ();}, methods: {/ / column drag columnDropInit () {/ / first step, get column container const wrapperColumn = document.querySelector (".el-table__header-wrapper tr") / / the second step is to specify the corresponding drag and drop rule this.sortable = Sortable.create to the column container (wrapperColumn, {animation: 500, delay: 0, onEnd: (event) = > {console.log) ("after dragging, it is found that the header data has not changed, so we need to update the header data manually", this.tableHeader) Console.log ("to update according to the old index and the new index is actually to exchange places", event.oldIndex, event.newIndex); / / the next exchange let tempHableHeader = [... this.tableHeader]; / / first save a copy of the temporary variable header data let temp / / the temporary variable is used to exchange temp = tempHableHeader [event.oldIndex-2]; / / notice that-2 is because I added two columns (check box column and serial number column) tempHableHeader [event.oldIndex-2] = tempHableHeader [event.newIndex-2] in front of the table. / / without these two columns, the serial number is normally corresponding, so you don't have to subtract 2 tempHableHeader [event.newIndex-2] = temp; / / say important things three times! / / the header data must be cleared here, and then the assignment will be performed in the next round, otherwise the rendering error / / must be emptied first, and then the assignment will be done in the next round, otherwise the error will be rendered / / the header data must be emptied here, and then the assignment will be carried out in the next round, otherwise the error this.tableHeader = [] will be rendered. / / you can try this.$nextTick (() = > {this.tableHeader = tempHableHeader;});},}) }, / / Line drag / / I think there is no need to add line drag, because after adding it, you cannot double-click the text of the selected row cell. Of course, you still have to listen to the product boss to arrange rowDropInit () {/ / the first step to get the row container const wrapperRow = document.querySelector (".el-table__body-wrapper tbody"); const that = this / / save a copy pointing to / / step 2, assign the row container the corresponding drag rule Sortable.create (wrapperRow, {onEnd ({newIndex, oldIndex}) {/ / here is another way to distinguish the column dragging above / / first delete the original item and save the original item, because splice returns an array The first item in the array is the deleted item const currRow = that.tableBody.splice (oldIndex, 1) [0] / / then add this item to the new location that.tableBody.splice (newIndex, 0, currRow);},});},},}; .myWrap {width: 100%; height: 100%; box-sizing: border-box; padding: 25px / deep/. El-table {.el-table__header-wrapper {tr {th {/ / set drag style to look better cursor: move } on the "drag plug-in sortable.js how to achieve el-table table drag effect" this article shares here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.