数据列表上下拖动排序插件

官方地址：https://github.com/RubaXa/Sortable

官方Demo：http://rubaxa.github.io/Sortable/

这里只是用了Demo里面ListA这个例子

1.引入js文件，

<script src="${ctx}/js/Sortable.js">script>

<script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js">script>

2.在列表的容器上添加标识，

<tbody id="data"> // 添加唯一标识
  <c:forEach var="vo" items="${labelList}">
    <tr>
      <td>...td>
      <td>...td>
      <td>...td>
      <td>
          ...
      td>
    tr>
  c:forEach>
tbody>

3.绑一下

//    // Simple list
var list = document.getElementById("data");
//    Sortable.create(list); // That's all.
var sortable = new Sortable(list, {
    onEnd: function (evt) {
        save();
    }
});

已经搞定了。

Sorttable构造方法有很多的参数，自己要用就去看看api就行。我这里只用到了一个onend方法

onEnd：每次拖动操作结束之后触发，

我做的是每次拖动结束后，把当前所有的数据排序id发送到后台保存，这样拖动之后的状态就能做到永久保存的效果，每拖动一次都会发送一次异步请求保存当前排序数据。

我所说的每次拖动结束，是说鼠标选中一条记录，上下拖动之后，松开鼠标之后就会触发。每动一条信息都会触发。

你也可以做一个保存按钮，想保存的时候点保存。

    function save() {
        var idsort = "|";
        var sort = $('#data').children("tr");
        for (var i = 0; i < sort.length; i++) {
            idsort = idsort + sort[i].id + '|';
        }
        //发送保存的请求
        $.ajax({
            'url': basePath + '/sortconfig/saveSort.do',
            'type': 'post',
            'data': {idsort: idsort,configId:2},
            'dataType': 'json',
            'contentType': 'application/x-www-form-urlencoded; charset=UTF-8',
            'success': function (json) {
//                ...
            },
            'error': function () {
                ....
            }
        });
    }

这是拖动起来的效果，上下拖动排序。样式就是你自己列表的样式，

每次拖动把排序之后的ids返回到后台去。请求用时大概50ms，所以就算人为拖动很频繁也跟得上。