jQuery UI可以使用动态“connectWith”选项进行排序

Question

我正在开发一个包含3个表的页面。在第3个表上，我有可以在第1或第2个表上排序和删除的行。

如果可以或不能在其他2个表之一上删除特定行，是否可以动态定义？一种动态化的“connectWith”选项......或任何其他方式......

Answer 1

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

然后在拖动tr时，将当前tr隐藏在当前表格中（第三个）。 在删除tr时，获取删除tr的表，然后添加tr，真正从第三个表中删除行。 最好不要在开始时立即删除第三个表中的行，因为如果拖动事件不正确（例如我放在错误的位置），您可以再次显示该行。

这里是jQuery UI draggable方法的链接：

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