jQuery可拖动表格元素答案

【问题标题】：jQuery draggable table elementsjQuery可拖动表格元素
【发布时间】：2010-09-23 09:36:46
【问题描述】：

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) 获取可拖动表格行的正确方法是什么。

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

【问题讨论】：

您的每个选择器中都有多余的空间吗？每个“div”之后和点之前不应有空格。例如，您的第一个选择器匹配 div 内具有 class="table" 的元素...
已修复，谢谢，但没有任何影响。 :(

标签： jquery css drag-and-drop html-table

【解决方案1】：

还有一种方法可以使用 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/

【讨论】：

技术不错！使用它时，不要忘记 $.droppable() 元素上的任何 drop 回调仍然可以引用 ui.draggable 属性以定位原始行元素。所以你不需要牺牲任何功能，同时使用一个有点时髦的助手（希望这是有道理的）
有没有不克隆 tr 元素的好方法？现在它同时显示原始和克隆的表行，对用户来说有点混乱
我不确定这是否可能，但是在源行中添加一个 css 类并在拖动时将其变灰或其他东西怎么样？

【解决方案2】：

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

如果您想在表格中拖动行，这个JQuery + "draggable row table" library 在 FireFox3 中完美运行

【讨论】：

哎呀——修复了表格位置。
不知道是不是故意的，但你的回答完全押韵:)
@AndresIlich 我试图再次看一下这个答案，/希望在其中抓住一个副歌/这将说明一些便利/英语写作能力/但我发现这种努力是徒劳的。 (english.blogoverflow.com/2011/11/…)
@VonC，我可以请您在这里查看一个关于不同主题的 jquery 问题：stackoverflow.com/questions/13137404/… 吗？
@IstiaqueAhmed 不幸的是，jquery 不是我的强项（正如我的标签所示：stackoverflow.com/users/6309/vonc?tab=tags）。您最好尝试联系其中一位大师：stackoverflow.com/tags/jquery/topusers

【解决方案3】：

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

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

只有我吗？

【讨论】：

【解决方案4】：

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

dragstart
drag
dragenter
dragleave
dragover
drop
dragend

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

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

【讨论】：

【解决方案5】：

我通过使用带有以下内容的 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>

【讨论】：

【解决方案6】：

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

【讨论】：