Fatal编程技术网
  • jquery/
  • jQuery可拖动表元素

jQuery可拖动表元素

jquery css

jQuery可拖动表元素,jquery,css,drag-and-drop,html-table,Jquery,Css,Drag And Drop,Html Table,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

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>


div.table{display:table；}
div.row{显示：表行；}
div.cell{display:表格单元格；}
$（文档）.ready（函数（）{
$（“.row”）.draggable（）；
});
福
酒吧
垃圾邮件
鸡蛋
福巴
斯帕梅格斯
我想知道a）是否有任何具体的原因（从w3c/HTML规范的角度来看）和b）获取可拖动表行的正确方法是什么

我喜欢真正的表格，因为它有边框折叠和行高算法——任何能做这些事情的替代方法都会很好。

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

如果您想拖动表中的行，这个在FireFox3中工作得很好，有一种方法也可以使用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();
},

helper:函数（事件）{
返回$（''）.find（'table'）.append（$（event.target）.最近（'tr'）.clone（））.end（）；
},
Thx给David Petersen的提示：

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

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

如果您希望能够通过拖动表中的tr来对它们重新排序，.sortable是您需要的，而不是.draggable

只有我吗？

我通过使用JqueryUI和以下内容来完成这项工作：

$（函数（）{
$（“.sortable”）.sortable({
回复：真
});
});

表td{
边框：实心1px黑色；
}
桌子{
边界塌陷：塌陷；
}



1.
一个
一些文本
2.
两个
一些文本
3.
三
一些文本
4.
四
一些文本
5.
五
一些文本
6.
六
一些文本

这有点晚了，但今天我发现可以与
元素配合使用。您所需要做的就是启用它并注册事件


dragstart
drag
dragenter
dragleave
dragover
drop
dragend


我觉得这篇文章很有帮助


！！请注意，此HTML5API中存在一个缺陷，当您将鼠标悬停在子元素上时，即使您只对父元素感兴趣，也会触发该事件。希望html5rocks的人能尽快修复它。
哎哟——修复了桌子的位置。不知道你是否有意，但你的答案完全押韵：）@Andreslich我试图再看一次这个答案，希望能在其中找到一个副歌/这会说明一些技巧/在英语写作能力方面/但我发现这一努力是徒劳的。（）@VonC，我可以请您在这里看一个关于不同主题的jquery问题吗？@IstiaqueAhmed不幸的是，jquery不是我的专长（如我的标签所示：）。你最好试着联系一位大师：你的每个选择器都有额外的空间吗？每个“div”之后和圆点之前不应有空格。例如，您的第一个选择器将元素与div中的class=“table”相匹配…已修复，谢谢，但没有任何区别：（技巧很好！使用此选项时，请不要忘记，
$上的任何
drop
回调。droppable（）
元素仍然可以引用
ui.draggable
属性以定位原始行元素。因此，在使用稍微时髦的助手时，您不需要牺牲任何功能（希望有意义）有没有一个不克隆tr元素的好方法？现在它同时显示原始表行和克隆表行，这让用户有点困惑。我不确定这是否可行，但是在拖动时向源行添加一个css类并使其变灰或做其他事情怎么样？