使用 HTML5 拖放 API 创建可排序的表格行

Question

我已经广泛搜索了一个示例，其中有人使用 HTML5 拖放 API 来启用表格行（tr 元素）的重新排序，但那里似乎没有任何内容。我遇到了一些定位鼠标光标位置的示例，但当然这些示例并没有利用看起来非常方便的新 API 事件。

迄今为止，我真正看到的所有帖子都是使用有序列表和无序列表以及列表元素的示例。我自己的实验以类似于在列表中使用它们的方式应用 dragstart、dragover 和 drop 处理程序并没有导致任何工作。

有没有人设法将这个应用到表格元素上，他们有一个可行的例子吗？我知道 jQuery 可排序插件，但我对原生 JavaScript 解决方案特别感兴趣。

Answer 1

我花了几天时间尝试根据本教程为 React JS “从头开始”实现 HTML 5 拖放：http://webcloud.se/sortable-list-component-react-js/，它似乎工作得很好。

这是我最终得到的结果：http://jsfiddle.net/LoneIgadzra/wsj7tLw8/

不幸的是，它需要 jQuery（虽然不是 jQuery UI）来实现几个我自己编写起来很痛苦的函数，即“closest()”和“offset()”。我希望这仍然可以让您更接近一个有效的拖放重新排序表。这并不复杂，但有很多陷阱。

您需要做的就是编写自己的偏移量实现，并且最接近于移除 jQuery。 React this.state.data 的东西可以用 DOM 函数替换，以便在放置时重新定位拖动的行。

老实说，如果你能侥幸成功的话，只要 jQuery UI Sortable 就可以对表格进行非常细微的调整。 HTML 5 拖放是一个糟糕的 API，而且兼容性较差。这是我放弃支持 React 的工作 jQuery UI 解决方案：

jQuery(function($) {
  $('table.sortable').sortable({
    items: ".item",
    axis: "y",
    stop: function(event, ui) {
      ui.item.effect('highlight');
    },
    update: function(event, ui) {
      // update server here
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<table class="sortable">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr class="item">
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr class="item">
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr class="item">
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
</table>