jQuery 可拖动表格元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/307882/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery draggable table elements
提问by cdleary
jQuery's draggablefunctionality doesn't seem to work on tables (in FF3 or Safari). It's kind of difficult to envision how this wouldwork, so it's not really surprising that it doesn't.
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>
I'm was wondering a) if there's any specific reason why this doesn't work (from a w3c/HTML spec perspective) and b) what the right way to go about getting draggable table rows is.
我想知道 a) 是否有任何具体原因导致这不起作用（从 w3c/HTML 规范的角度来看）和 b) 获取可拖动表格行的正确方法是什么。
I like real tables because of the border collapsing and row height algorithm -- any alternative that can do those things would work fine.
由于边框折叠和行高算法，我喜欢真正的表格——任何可以做这些事情的替代方法都可以正常工作。
采纳答案by VonC
If you have truly tabular data, you should stick with table indeed.
如果你有真正的表格数据，你应该坚持使用表格。
And if you want to drag rows withina table, this JQuery + "draggable row table" libraryworks perfectly in FireFox3
如果你想在表中拖动行，这个JQuery +“可拖动行表”库在 FireFox3 中完美运行
回答by Ariel Popovsky
There is a way to make table rows draggable with JQuery UI too. All you need to do is set the helper option to a function returning a new div with a table inside that will host the row you are dragging like:
也有一种方法可以使用 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();
},
Thx to David Petersen for the tip: http://blog.petersendidit.com/post/drag-table-row-to-a-div-with-jquery/
感谢大卫彼得森的提示：http: //blog.petersendidit.com/post/drag-table-row-to-a-div-with-jquery/
回答by Enigma Plus
Just in case anyone makes the same mistake I did:
以防万一有人犯和我一样的错误：
If you want to be able to reorder TRs inside a table by dragging them around, .sortable is what you need rather than .draggable
如果您希望能够通过拖动它们来重新排列表格内的 TR，那么您需要的是 .sortable 而不是 .draggable
Just me?
只有我？
回答by Rn2dy
This is kinda late, but today I found html5 drag'n drop APIworks fine with <tr>element. All you need to do is enable it <tr draggable="true">and register the events
这有点晚了，但今天我发现html5 拖放 API可以很好地处理<tr>元素。您需要做的就是启用它<tr draggable="true">并注册事件
dragstart
drag
dragenter
dragleave
dragover
drop
dragend
I found this article very helpful http://www.html5rocks.com/en/tutorials/dnd/basics/
我发现这篇文章非常有帮助http://www.html5rocks.com/en/tutorials/dnd/basics/
!!Be aware that there is a flaw in this html5 API that the event will be fired when you hover over the child elements even though you are only interested in the parent element. Hope html5rocks people will fix it soon.
!!请注意，此 html5 API 存在一个缺陷，即即使您只对父元素感兴趣，当您将鼠标悬停在子元素上时也会触发该事件。希望 html5rocks 人会尽快修复它。
回答by sevmusic
I made this work by using JqueryUI with the following:
我通过使用带有以下内容的 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>回答by Andrei
One can also set css tr.ui-draggable-dragging {display: block}- this way one can drag the rows, however, their coordinates are poorly calculated. I haven't found a good solution for this issue yet.
还可以设置 css tr.ui-draggable-dragging {display: block}- 这样就可以拖动行，但是，它们的坐标计算很差。我还没有找到解决这个问题的好办法。
