我有两个div是float：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);
}
});
我能够得到这个工作与列表元素，但现在我添加一个解释发明表，我想使用左侧的表为样式的目的。
解决方法
这可能会做的伎俩。变化：
>将t元素包裹在tbody内
>在拖动tr时添加了助手克隆。只有这样我才能使拖动实际工作。 (告诉我，如果你不想要这个(你想要tr从表中删除，当你开始拖动)，我们将看看，如果我们可以找到一个解决方案)
javascript。当拖动开始时，将创建一个克隆(由于帮助程序：“clone”)，c变量将指向克隆和tr被拖动。当拖动停止时，如果它在可droppable之外，克隆被销毁。如果它在draggable内，我们销毁克隆和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唯一的新东西是trs在tbody标签内的包装。
这里有一个演示：http://jsfiddle.net/UBG9n/1/