29

jQuery 的draggable功能似乎不适用于表格（在 FF3 或 Safari 中）。很难想象这将如何工作，所以它没有发挥作用也就不足为奇了。

<html>
  <style type='text/css'>
    div.table { display: table; }
    div.row { display: table-row; }
    div.cell { display: table-cell; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.core.js"></script>
  <script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.draggable.js"></script>
  <script>
  $(document).ready(function(){
    $(".row").draggable();
  });
  </script>
  <body>
    <div class='table'>
      <div class='row'>
        <div class='cell'>Foo</div>
        <div class='cell'>Bar</div>
      </div>
      <div class='row'>
        <div class='cell'>Spam</div>
        <div class='cell'>Eggs</div>
      </div>
    </div>
    <table>
      <tr class'row'><td>Foo</td><td>Bar</td></tr>
      <tr class='row'><td>Spam</td><td>Eggs</td></tr>
    </table>
  </body>
</html>

我想知道 a) 是否有任何具体原因导致这不起作用（从 w3c/HTML 规范的角度来看）和 b) 获取可拖动表格行的正确方法是什么。

由于边框折叠和行高算法，我喜欢真正的表格——任何可以做这些事情的替代方案都可以正常工作。

4

6 回答 6

35

也有一种方法可以使用 JQuery UI 使表格行可拖动。您需要做的就是将 helper 选项设置为返回一个新 div 的函数，其中包含一个表格，该表格将承载您拖动的行，例如：

helper: function(event){
return $('<div class="drag-cart-item"><table></table></div>').find('table').append($(event.target).closest('tr').clone()).end();
},

感谢大卫彼得森的提示：http ://blog.petersendidit.com/post/drag-table-row-to-a-div-with-jquery/

于 2010-02-09T19:25:45.083 回答
22

如果你有真正的表格数据，你应该坚持使用表格。

如果你想在表格中拖动行，这个JQuery +“可拖动行表”库在 FireFox3 中完美运行

于 2008-11-21T05:08:32.427 回答
11

以防万一有人犯我犯的同样错误：

如果您希望能够通过拖动来对表格中的 TR 重新排序，那么 .sortable 是您所需要的，而不是 .draggable

只有我？

于 2012-04-18T13:07:06.590 回答
3

这有点晚了，但今天我发现html5 拖放 API可以很好地与<tr>元素配合使用。您需要做的就是启用它<tr draggable="true">并注册事件

dragstart
drag
dragenter
dragleave
dragover
drop
dragend

我发现这篇文章很有帮助http://www.html5rocks.com/en/tutorials/dnd/basics/

!!请注意，此 html5 API 中存在一个缺陷，即当您将鼠标悬停在子元素上时，即使您只对父元素感兴趣，也会触发该事件。希望 html5rocks 的人能尽快修复它。

于 2013-05-06T00:32:53.060 回答
1

我通过使用带有以下内容的 JqueryUI 完成了这项工作：

$(function() {
  $(".sortable").sortable({
    revert: true
  });
});
table td {
  border: solid 1px black;
}
table {
  border-collapse: collapse;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<table>
  <tbody class="sortable">
    <tr>
      <td>1</td>
      <td>One</td>
      <td>some text</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Two</td>
      <td>some text</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Three</td>
      <td>some text</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Four</td>
      <td>some text</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Five</td>
      <td>some text</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Six</td>
      <td>some text</td>
    </tr>
  </tbody>
</table>

于 2012-08-23T13:12:31.040 回答
0

也可以设置 css tr.ui-draggable-dragging {display: block}- 这样可以拖动行，但是，它们的坐标计算不佳。我还没有找到解决这个问题的好方法。

于 2012-01-20T12:57:47.090 回答