使用Mootools對表格行進行排序

Question

好吧，我正在嘗試使用Mootools在表格上實現拖放式可排序行。 這個問題我整個上午都在努力，可以找出解決方案，這是HTML表格：

<table class="table table-bordered">
  <tbody>
    <tr class="item">
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr class="item">
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr class="item">
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

這是Javascipt：

window.addEvent('domready', function() {
  /* create sortables */
      var d = $$('tr');
  var sb = new Sortables(d, {
    /* set options */
    clone:true,
    revert: true,
    /* initialization stuff here */
    initialize: function() { 

    },
    /* once an item is selected */
    onStart: function(el) { 
      el.setStyle('background','#add8e6');
    },
    /* when a drag is complete */
    onComplete: function(el) {
      el.setStyle('background','#ddd');
      //build a string of the order

    }
  });
});

這是一個jsfiddle 。 非常感激。

Answer 1

據我了解，這是您遇到的問題：

您希望使行可排序嗎？ 您的Fiddle示例中的所有單元格都可以單獨排序。

您的問題在這里：

var d = $$('tr');
var sb = new Sortables(d);

您已將所有tr傳遞為可排序列表。 這意味着所有td都是可排序的。

您需要傳遞：

var d = $('tbody');
var sb = new Sortables(d);

Mootools文檔狀態：

參數：[1]列表-（混合）必填，將變為可排序的一個或多個列表。

在這種情況下，列表是其子級將變為可排序的任何元素（或元素數組）。

看到這里： 更新的小提琴