表行是否可以拖动？

Question

我有两个漂浮的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);
    }
});

我能够使用列表元素,但现在我在发明表中添加了一个解释,我想在左侧使用一个表格来进行样式设置.

Answer 1

这可能会成功.变化:

• 将tr元素包裹在里面tbody
• 拖动时添加了辅助克隆tr.只有这样我才能使拖动真正起作用.(如果你不想要这个,请告诉我(你希望在开始拖动时从表中删除tr),我们将看看是否能找到解决方案)

javascript.当拖动开始时,会产生一个克隆(因为helper: "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 inside tbody标签.

这是一个演示:http://jsfiddle.net/UBG9n/1/

Answer 2

基于Simen演示的更简单的解决方案:http://jsfiddle.net/UBG9n/927

没有必要为参考tr,我们拖着,因为jQueryUI的提供ui.draggable和ui.helper我们可以用它来清理拖动的元素和一个帮手:

    $(ui.draggable).remove();
    $(ui.helper).remove();`