jsPlumb makeSource（）和jQuery sortable（）不能很好地协同工作

Question

我正在创建一个用户界面，允许用户通过拖放界面创建数据库表（及其字段和关系）。

这是我创建的jsFiddle，尽管它看起来有很多事情要做，但实际上它只是演示问题所需的最低限度。以下是我的要求，jsPlumb很好地单独处理了这些要求，但是当我试图把它们放在一起时，我会遇到问题。特别是，它将#2和#3结合在一起是一个问题。

1. 表格可以在画布上拖动（使用jsPlumb.draggable（））
2. 表中的字段可以通过向上/向下拖动（使用jQuery sortable（））重新排序
3. 用户可以通过拖动来绘制两个不同表的字段之间的新关系
4. 任何两个表之间的连接线应该自动重新绘制，当表被拖动时，这样它们总是连接到/从最靠近另一个表的任何一边

为了完成#4，我在表示字段的每个“磁贴”上调用jsPlumb.makeSource（）和jsPlumb.makeTarget（），而不是在每个磁贴的右侧和左侧创建特定的endpoint。这样，jsPlumb可以管理连接线的重绘，将连接线重绘到“字段”磁贴的更靠近其连接的磁贴的任何一侧。

然而，为了完成#2，我将jQuery sortable应用于字段，为用户提供“拖动重新排序”功能。这就产生了一个冲突，当你点击一个字段时，你在请求哪个“操作”...排序或启动jsPlumb连接？因此，我在每个字段中附加一个红色的div（带有一个“.item-hit.area”类），并在makeSource（）调用中添加一个过滤器，这样只有红色的div可以用来创建新的jsPlumb连接。

jsPlumb.makeSource($('.item'), {
    filter:function(event, element) {
        return ($(event.target).hasClass('item_hit_area'));
    }
    ....
}

因此，现在单击红色div会告诉jsPlumb启动连接，或者单击“字段”元素中的任何其他位置会传递给jQuery sortable（）。

希望这些要求是明确的。下面是如何重新创建问题。

• 从Foo 1上的红色磁贴拖动到Bar 2的主体，绘制两个表之间的新关系
• 拖动fos表（按其标题），以查看#4是否正常工作（所有线条都重新绘制正常）
• 现在将Foo 1拖动到我所有的脚内的项目列表中，这样它就不是列表中最上面的项目，而是第二或第三个项目。到目前为止还不错，当你拖动时，jsPlumb继续正确更新连接线
• 当您拖动Fas表来移动它时，问题就出现了。一旦你这样做了，突然连接“福1”和“酒吧2”的线就错了。不幸的是，我在stackoverflow上没有足够的声誉来发布图片。但是试试看，你会看到线跳到了错误的地方。

更奇怪的是，如果你拖动另一个表（“我所有的酒吧”表），连接线会跳回到两端的正确位置。只有当你拖动jsPlumb连接的“源”侧的表时，它才会感到困惑，并在错误的地方画线。

Answer 1

问题是jsPlumb缓存了一些可拖动的子元素的偏移量。因此，在排序之后，您需要告诉jsPlumb重新计算这些偏移量，如以下小提琴所示：

http://jsfiddle.net/S7gVa/17/

注意这一行：

        jsPlumb.recalculateOffsets($(ui.item).parents(".draggable"));

在可排序的停止回调中。