jQuery可拖动表格元素

Posted 2023-03-06

技术标签:

【中文标题】jQuery可拖动表格元素【英文标题】：jQuery draggable table elements 【发布时间】：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" 的元素... 已修复，谢谢，但没有任何影响。 :( 【参考方案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 问题：***.com/questions/13137404/… 吗？ @IstiaqueAhmed 不幸的是，jquery 不是我的强项（正如我的标签所示：***.com/users/6309/vonc?tab=tags）。您最好尝试联系其中一位大师：***.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 - 这样可以拖动行，但是，它们的坐标计算不佳。我还没有找到解决这个问题的好办法。

【讨论】：

以上是关于jQuery可拖动表格元素的主要内容，如果未能解决你的问题，请参考以下文章

jquery draggable - 删除拖动元素

jQuery可拖动：在拖动开始时访问被拖动的元素

克隆时的jQuery可拖动元素不可拖动

如何使用 jquery ui 使拖动和克隆的元素再次可拖动？

如何在 snap 上找出 jQuery UI 可拖动元素的“捕捉到”元素

如何使用 JQuery 制作可拖动元素？