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的唯一新功能是在tr标记内包装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();`

Answer 3

是的，他们可以，一种方式是table row dnd plugin

表行是否可以拖动？

3 个答案: