表格行可以拖动吗？
我有两个浮动的div：left：
<div id="inventor"> <table> <tr id="1"><td>Alexander Graham Bell</td></tr> <tr id="2"><td>Thomas Edison</td></tr> <tr id="3"><td>Nicholas Tesla</td></tr> </table> </div> <form> <div id="invention"> <table> <tr><td><input name="answer1" />Tesla coil</td><td>Explanation</td></tr> <tr><td><input name="answer2" />Telephone</td><td>Explanation</td></tr> <tr><td><input name="answer3" />Phonograph</td><td>Explanation</td></tr> <tr><td><input name="answer4" />Light bulb</td><td>Explanation</td></tr> </table> </div> </form> 我希望能够将发明者拖到发明中去。
$("#inventor tr").draggable({ revert: "valid" }); $("#invention tr").droppable({ drop: function(event, ui) { var inventor = ui.draggable.text(); $(this).find("input").val(inventor); } });
我能够得到这与列表元素的工作，但现在我添加一个发明表的解释，我想使用左侧的表格为样式的目的。
这可能会诀窍。 变化：
- 把
tr元素包裹在tbody里面 - 拖动
tr时添加了一个helper clone。 只有这样我才能使拖动真正的工作。 （告诉我，如果你不想要这个（你想在开始拖动时将tr从表中移除），我们将看看我们是否可以find解决scheme）
javascript。 当拖动开始时，将创build一个克隆（因为helper: "clone" ），并且cvariables将全部引用克隆，tr被拖动。 当拖动停止时，如果在拖放之外，则克隆被破坏。 如果它在可拖动的内部，我们销毁克隆和tr（所以它从列表中删除，不能再被拖动）
//this will hold reference to the tr we have dragged and its helper var c = {}; $("#inventor tr").draggable({ helper: "clone", start: function(event, ui) { c.tr = this; c.helper = ui.helper; } }); $("#invention tr").droppable({ drop: function(event, ui) { var inventor = ui.draggable.text(); $(this).find("input").val(inventor); $(c.tr).remove(); $(c.helper).remove(); } });
HTML中唯一的新function是tbody标签内部的tbody包装。
这是一个演示： http : //jsfiddle.net/UBG9n/1/
基于西门子演示的更简单的解决scheme： http : //jsfiddle.net/UBG9n/927
没有必要引用我们拖动的tr ，因为jQueryUI提供了ui.draggable和ui.helper ，我们可以使用它来清理拖动的元素和帮助器：
$(ui.draggable).remove(); $(ui.helper).remove();`
是的，他们可以，一种方式是表行dnd插件
