sortable.js 官网
拖放排序插件Sortable.js中文介绍
1. 安装 npm 或 yarn 安装
2. 使用
效果：
3. 小结
事件：
onChoose ：function 列表单元被选中的回调函数
onStart ：function 列表单元拖动开始的回调函数
onEnd ：function 列表单元拖放结束后的回调函数
onAdd ：function 列表单元添加到本列表容器的回调函数
onUpdate ：function 列表单元在列表容器中的排序发生变化后的回调函数
onRemove ：function 列表元素移到另一个列表容器的回调函数
onFilter ：function 试图选中一个被filter过滤的列表单元的回调函数
onMove ：function 当移动列表单元在一个列表容器中或者多个列表容器中的回调函数
onClone ：function 当创建一个列表单元副本的时候的回调函数
事件对象：
to ：HTMLElement--移动到列表容器
from ：HTMLElement--来源的列表容器
item ：HTMLElement--被移动的列表单元
clone ：HTMLElement--副本的列表单元
oldIndex ：number/undefined--在列表容器中的原序号
newIndex ：number/undefined--在列表容器中的新序号
方法
option(name[,value])
获得或者设置项参数，使用方法类似于jQuery用法，没有第二个参数为获得option中第一个参数所对应的值，有第二个参数时，将重新赋给第一个参数所对应的值；
toArray()
序列化可排序的列表单元的data-id（可通过配置项中dataIdAttr修改）放入一个数组，并返回这个数组中
sort()
通过自定义列表单元的data-id的数组对列表单元进行排序
save()
destroy()
如果你用过 jQuery UI，那么你应该会知道它内置有一个拖动排序(sortable)的功能。今天给大家推荐一个轻量级的拖动排序插件，让你能够摆脱 jQuery UI。
HTML5 Sortable 是一个简单易用的轻量级 jQuery 插件，它可让你轻松实现列表的拖动排序功能，它基于原生 HTML5 的拖动 API 而实现。更重要的一点是它支持包括 IE 在内的所有主流浏览器。
如何使用
请参考http://farhadi.ir/projects/html5sortable/
首先引入 jQuery 框架HTML5 Sortable 插件。
1、<script src="jquery.min.js"></script>
2、<script src="jquery.sortable.js"></script>
然后像这样添加一个 UL 列表，同时可以再加上自定义的样式。
<ul class="sortable"
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
最后初始化
//初始化
$('.sortable').sortable()
//绑定方法:当改变排序后执行
$('.sortable').sortable().bind('sortupdate', function() {//Triggered when the user stopped sorting and the DOM position has changed. })
//移除拖动排序功能
$('.sortable').sortable('destroy')
获取修改之后表格中的值！
这几天找到了这个插件，感觉很好！
var data = [],container = document.getElementById('example'),
hot = new Handsontable(container, {
data: data,
minSpareRows: 20,//显示空白行数
colHeaders: true,//是否显示表格头部字母表
contextMenu: true,//右键显示更多功能
rowHeaders: true,//是否显示列数字
manualColumnResize: true,//自定义列高
manualRowResize: true,//自定义行宽
manualColumnMove: true,//是否能拖动列
manualRowMove: true,//是否能拖动行
columnSorting:true, //false/对象 //当值为true时，表示启用排序插件
// className: "htCenter", //表格文字对其方式 htCenter,htLeft, htCenter, htRight, htJustify, htTop, htMiddle, htBottom
// currentRowClassName: 'currentRow',//定义th与td样式，更精准的锁定点击点
// currentColClassName: 'currentCol',
// autoWrapRow: false,
colWidths: 110,//列宽px,定义之后文字自动换行
columns: [//每一个对象对应一列
{
// data: '列号自定义名称',//列号自定义名称,使用colHeaders之后不起作用
// readOnly: true,//是否是可读
type: 'numeric',
format: '0,0.00',// format: '$0,0.00',
language: 'en',
},
{
type: 'date',
dateFormat: 'YYYY-MM-DD',
correctFormat: true,
defaultDate: '2008-05-01',
},{对应每个标题},{},{},{},{},{},{},{},
],
｝)
用了之后感觉对表格的功能上制定非常简单。
但是就是在获取值上没找到方法，不过多次百度之后，基本上网上就是讲了两个地方！
一个是核心方法（hot.方法名）就能得到值。
另一个就是 钩子事件。
我还没来得及弄清楚钩子上的事件问题，不过 第一个事件已经可以实现那个功能了，afterChange (changes: Array, source: String) 。将此钩子事件用上即可！
怎么用？ 我需要自己看看！！
-------------------------------------------------------------------------标记
