jQuery UI 可通过动态"connectWith"选项进行排序

Question

我正在开发带有3个表的页面。在第三桌上，我有可以在第一或第二个表上排序并丢弃的行。

如果可以将特定的行放在其他2个表之一上，我可以动态定义吗？一种动态的"连接"选项...或任何其他方法...

Answer 1

您可以使用jQuery UI的.draggable()方法来定义第三个表的行。调用可拖动方法，您可以指定可以删除元素的位置。

然后在TR的阻力上，将当前TR隐藏在当前表(第三个(中。TR下降时，获取桌子放下TR并真正添加TR的表格，真正从第三个表中删除了行。最好是在开始时您不要立即从第三个表中删除行，因为如果拖放事件不正确(例如，我放在错误的位置(，您可以再次显示该行。

在这里链接到jQuery UI拖动方法：

https://jqueryui.com/draggable/

代码的POC：

$( "#third-table tr" ).draggable({ 
    snap: ".drop-tables",
    start: function() {
        // hide the row from the third table
    },
    stop: function() {
        // add the row to the target table
        // remove the row from the third table
    }
});