jquery - jsPlumb makeSource() 和 jQuery sortable() 不能很好地协同工作

Question

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

这是jsFiddle我创建了，虽然看起来发生了很多事情，但实际上只是演示问题所需的最低限度。以下是我的要求，jsPlumb 可以很好地单独处理这些要求，但是当我尝试将它们全部一起完成时，我遇到了问题。特别是，将#2 和#3 结合在一起是一个问题。

1. “表格”可以在 Canvas 上拖动(使用 jsPlumb.draggable())
2. 表中的“字段”可以通过向上/向下拖动来重新排序(使用 jQuery sortable())
3. 用户可以通过拖动在两个不同表的字段之间绘制新的“关系”
4. 当拖动表格时，任何两个表格之间的连接线应自动重新绘制，以便它们始终连接到/来自最接近“另一个表格”的一侧

为了实现#4，我在代表字段的每个“图 block ”上调用 jsPlumb.makeSource() 和 jsPlumb.makeTarget()，而不是在每个图 block 的右侧和左侧创建特定端点。这样，jsPlumb 就可以管理将连接线重新绘制到“字段”图 block 的靠近其所连接的图 block 的一侧。

但是，为了实现#2，我将 jQuery 可排序应用到字段，为用户提供“拖动重新排序”功能。这会产生冲突，当您单击某个字段时您请求哪个“操作”...排序或启动 jsPlumb 连接？因此，我向每个字段附加一个红色 div(具有“.item-hit.area”类)，并向 makeSource() 调用添加一个过滤器，以便只有该红色 div 可用于创建新的 jsPlumb 连接。

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

现在单击红色 div 告诉 jsPlumb 启动连接，或者单击“field”元素内的任何其他位置都会传递给 jQuery sortable()。

希望这些要求是明确的。以下是重现问题的方法。

• 从“Foo 1”上的红色图 block 拖动到“Bar 2”的主体以绘制两个表之间的新关系
• 拖动 foos 表(按其标题)以查看 #4 是否正常工作(所有行都正确重绘)
• 现在将“Foo 1”拖到“All my Foos”内的项目列表中，这样它就不再是列表中最上面的项目，而是第二个或第三个项目。到目前为止一切顺利，当您拖动时，jsPlumb 会继续正确更新连接线
• 当您拖动 Foos 表来移动它时，就会出现问题。一旦你这样做了，连接“Foo 1”和“Bar 2”的线突然出现在错误的位置。不幸的是，我在 stackoverflow 上没有足够的声誉来发布图像。但尝试一下，您会发现该行跳到了错误的位置。

更奇怪的是，如果您拖动其他表格(“我的所有酒吧”表格)，连接线两端都会跳回到正确的位置。只有当您拖动位于 jsPlumb 连接“源”端的表格时，它才会变得困惑并在错误的位置绘制线条。

Answer 1

问题在于 jsPlumb 缓存了某些可拖动的子元素的偏移量。因此，排序后，您需要告诉 jsPlumb 重新计算这些偏移量，如以下 fiddle 所示:

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

注意这一行:

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

在可排序的停止回调中。