Jquery ui 表格行可以拖拽吗？

我有两个浮动的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>

---

我可以通过列表元素实现这一点，但现在我正在为发明表添加说明，我想使用左侧的表进行样式设置。

是的，它们可以是，一种方法是这样做。变化：

• 将

  tr

  元素包装在

  tbody

• 在拖动

  tr

  时添加了辅助对象克隆。我唯一能让拖拽真正起作用的方法。（如果您不希望这样做，请告诉我（您希望在开始拖动时将tr从表中删除），我们将看看是否可以找到解决方案）

javascript。当拖动开始时，将创建一个克隆（因为

helper:“clone”

），并且

c

变量将引用正在拖动的克隆和tr。当拖动停止时，如果它在可拖放的外部，克隆将被销毁。如果它在可拖动范围内，我们将销毁克隆和tr（因此它将从列表中删除，无法再次拖动）

HTML的唯一新功能是在

tbody

标记中包装

tr

s

---

这里有一个演示：

一个基于Simen演示的更简单的解决方案：

不需要引用我们已经拖动的

tr

，因为jQueryUI提供了

ui.draggable

和

ui.helper

，我们可以使用它们来清理被拖动的元素和一个helper：

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

---

我可能错过了它，但该插件仅使表行在表中内部可排序。（这也可以用普通的jQuery UI来完成，顺便说一句）使用链接插件的一个小例子可以改进这个答案。另请参阅克隆部分很重要，没有表行就不会拖动。@MichaelH JSFIDLE失去了对jQuery UI的引用，所以您可以将URL添加到外部资源中

//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();
    }
});

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