データ・リストの上下ドラッグ・ソート・プラグイン

公式住所: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メソッドを1つしか使いませんでした
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をバックグラウンドに戻します.リクエストは50 ms程度なので、人為的にドラッグしても頻繁についていけます.