问jsPlumb makeSource()和jQuery sortable()不能很好地一起工作

EN

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

这是我创建的jsFiddle，虽然它看起来有很多事情发生，但实际上它只是演示问题所必需的最小值。下面是我的需求，jsPlumb分别很好地处理这些需求，但是当我尝试将它们全部处理在一起时，我会遇到问题。特别是，合并#2和#3是一个问题。

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

为了完成#4，我在每个表示字段的“平铺”上调用jsPlumb.makeSource()和jsPlumb.makeTarget()，而不是在每个块的右侧和左侧创建特定的端点。这样，jsPlumb就可以管理将连接线重绘到与其连接的瓷砖更接近的“字段”瓷砖的任何一侧。

但是，为了完成#2，我将jQuery排序应用到字段中，以赋予用户“拖动到重新排序”的功能。当您单击field...sorting或启动jsPlumb连接时，这会产生冲突，说明您请求的是哪个“操作”？因此，我向每个字段追加了一个红色div (带有一个“.itt-hit.rea”类)，并向makeSource()调用添加了一个筛选器，以便只有红色div可以用来创建一个新的jsPlumb连接。

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

因此，现在单击红色div告诉jsPlumb启动一个连接，或者单击"field“元素中的其他任何位置将传递给jQuery sortable()。

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

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

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