Package Exports

el-table-draggable
el-table-draggable/dist/ElTableDraggable.umd.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (el-table-draggable) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

el-table-draggable

中文文档

Let el-table support sortable.js

Demo Page

Features

support almost all options in sortablejs
support drag from one to another table
support treeTable
support vetur
support onMove
support drag into an empty el-table

You can see in Demos

Drag rows
Drag columns(>1.1.0)
Drag tree(>1.2.0)
disable move by set onMove(>1.3.0)
Set handle for drag
Set group
...other option in sortable.js
event input, after the change of all

Install

use npm or yarn

yarn add el-table-draggable

npm i -S el-table-draggable

Usage

import ElTableDraggable from "el-table-draggable";

export default {
  components: {
    ElTableDraggable,
  },
};

template

<template>
  <el-table-draggable>
    <el-table row-key></el-table>
  </el-table-draggable>
</template>

props

tag

the wrapper tag of el-table, default is div

column

support drag column

onMove

set onMove callback

onMove: function (/**Event*/evt, /**Event*/originalEvent, domInfo) {
   // Example: https://jsbin.com/nawahef/edit?js,output
   evt.dragged; // dragged HTMLElement
   evt.draggedRect; // DOMRect {left, top, right, bottom}
   evt.related; // HTMLElement on which have guided
   evt.relatedRect; // DOMRect
   evt.willInsertAfter; // Boolean that is true if Sortable will insert drag element after target by default
   originalEvent.clientY; // mouse position
   
   domInfo.dragged // the origin dom info of dragged tr, like parent domInfo, level, data, and it's index
   domInfo.related // like dragged
   
   // return false; — for cancel
   // return -1; — insert before target
   // return 1; — insert after target
},

other

sortablejs's option

Event

input

data or cloumn after change

other

sortablejs's option, the option start with on, ExampleonSort => @sort

todo

Tree Table

Donation

By me a coffee