Question

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

这是我创建的jsFiddle，虽然它看起来很多，但它实际上只是展示问题所必需的最低限度。这是我的要求，jsPlumb分别处理得很漂亮，但是当我尝试将它们全部组合在一起时，我遇到了问题。特别是它将＃2和＃3结合起来是一个问题。

“Tables”可在画布周围拖动（使用jsPlumb.draggable（））
“fields”可以通过向上/向下拖动来重新排序（使用jQuery sortable（））
用户可以拖动以在两个不同表格的字段之间绘制新的“关系”
当拖动表格时，任何两个表格之间的连接线应自动重绘，以便它们始终连接到最接近“其他表格”的一侧

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

但是，为了完成＃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”上的红色方块拖动到“Bar 2”的主体，以在两个表格之间绘制新关系
将foos表格（通过标题）拖动以查看＃4是否正常工作（所有行都正确重绘）
现在在“All my Foos”中的项目列表中向下拖动“Foo 1”，这样它就不是列表中最顶层的项目，而是第二项或第三项。到目前为止一切顺利，当你拖动时，jsPlumb继续正确地更新连接线
当您拖动Foos表移动它时，问题就出现了。一旦你这样做，突然连接“Foo 1”到“Bar 2”的线路位置错误。不幸的是，我在stackoverflow上没有足够的声誉来发布图像。但试试吧，你会看到线路跳到错误的位置。

陌生人仍然是如果你拖动其他表（“我的所有酒吧”表），连接线会跳回到两端的正确位置。只有当您拖动jsPlumb连接的“源”侧的表时才会混淆并将该行拖到错误的位置。

Answer 1

问题是jsPlumb缓存了一些可拖动的子元素的偏移量。因此，在排序后，您需要告诉jsPlumb重新计算这些偏移量，就像在这个小提琴中一样：

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

注意这一行：

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

在sortable的停止回调中。

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

1 个答案: