table-dragger

table-dragger

最后,您可以随心所欲地拖动和排序表格。 [![demo.gif][demoPic]][demo]

演示

试试 [演示][demo]!

灵感

Table-dragger 是一个极简的 JavaScript 库,用于构建可重新排序的拖放表格。

特性

• 设置非常简单
• 在表格中使用 cellspacing、 cellpadding、 col 和 colgroup
• 可以同时对列或行进行排序
• 排序时动画平滑
• 没有臃肿的依赖项
• 触摸事件

安装

你可以在 npm 上获取它。

npm install table-dragger --save

或者

使用方式

import tableDragger from 'table-dragger'

tableDragger(el, options?)

  
  

    header1
    header2
  

  
  
  

    conten1
    conten2
  

  

var el = document.getElementById('table');
var dragger = tableDragger(el, {
  mode: 'row',
  dragHandler: '.handle',
  onlyBody: true,
  animation: 300
});
dragger.on('drop',function(from, to){
  console(from);
  console(to);
});

此外,您也可以不设置任何选项,默认情况下将采用默认选项进行拖放。 以下详细介绍了各个选项。

options.mode

• 将 mode 设置为 column，用户可拖动并排序表格的列
• 将 mode 设置为 row，用户可拖动并排序表格的行
• 将 mode 设置为 free，用户可根据鼠标移动方向拖动行或列。请注意，在 free 模式下，您必须指定 dragHandler。

options.animation

• ms, 排序时移动项目的动画速度, 300 — 无动画