jQuery 拖放表格单元格内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23472505/
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
Drag and Drop table cell contents
提问by kannan D.S
I have a Dynamic table here. Table data includes one span also. How can drag and drop that span anywhere among table's cells?
我这里有一个动态表。表数据也包括一个跨度。如何在表格单元格之间的任何位置拖放该跨度？
<table id="#our_table">
<tr>
<th>head1</th>
<th>head1</th>
<th>head1</th>
</tr>
<tr>
<td><span id="event"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
回答by Devima
Or you just use drag drop html5 with this simple code (Fiddle)
或者您只需使用带有此简单代码的拖放 html5 ( Fiddle)
<script type="text/javascript">
$(document).ready(function(){
$('.event').on("dragstart", function (event) {
var dt = event.originalEvent.dataTransfer;
dt.setData('Text', $(this).attr('id'));
});
$('table td').on("dragenter dragover drop", function (event) {
event.preventDefault();
if (event.type === 'drop') {
var data = event.originalEvent.dataTransfer.getData('Text',$(this).attr('id'));
de=$('#'+data).detach();
de.appendTo($(this));
};
});
})
</script>
with this code you must also assign an id to your span tag
in this other fiddleyou can see the effect with two span tags.
In this case if there is a span in the cell the drop event does not work
使用此代码，您还必须
在另一个小提琴中为您的 span 标签分配一个 id，您可以看到两个 span 标签的效果。
在这种情况下，如果单元格中有跨度，则放置事件不起作用
回答by Ashok Damani
demo: http://jsfiddle.net/B93w9/
演示：http: //jsfiddle.net/B93w9/
$(function() {
$( "#our_table span" ).draggable();
$( "#our_table td" ).droppable();
});
and rename your table's id <table id="our_table">
并重命名您的表的 id <table id="our_table">
回答by Mark Rijsmus
If you are using jQuery you could also try the jQuery UI library. The span should be a draggable http://jqueryui.com/draggable/and the cell a droppable http://jqueryui.com/droppable/
如果您使用 jQuery，您还可以尝试 jQuery UI 库。跨度应该是一个可拖动的http://jqueryui.com/draggable/和单元格一个可放置的http://jqueryui.com/droppable/
