2

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

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

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

为了完成#4，我在每个表示字段的“图块”上调用 jsPlumb.makeSource() 和 jsPlumb.makeTarget()，而不是在每个图块的右侧和左侧创建特定端点。这样，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”的主体以绘制两个表格之间的新关系
  • 拖动 foos 表（按其标题）以查看#4 是否正常工作（所有行都正确重绘）
  • 现在在“All my Foos”内的项目列表中向下拖动“Foo 1”，这样它就不是列表中最顶部的项目，而是第二个或第三个项目。到目前为止一切顺利，当您拖动时，jsPlumb 会继续正确更新连接线
  • 当您拖动 Foos 表来移动它时，就会出现问题。一旦你这样做了，突然连接“Foo 1”和“Bar 2”的线就在错误的地方。不幸的是，我在 stackoverflow 上没有足够的声誉来发布图片。但试一试，你会发现线路跳错了位置。

更奇怪的是，如果您拖动另一张表（“All my Bars”表），连接线会跳回两端的正确位置。只有当您拖动位于 jsPlumb 连接的“源”端的表格时，它才会混淆并在错误的位置画线。

4

1 回答 1

0

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

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

注意这一行：

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

在可排序的停止回调中。

于 2013-11-20T10:03:44.830 回答