【发布时间】：2013-11-05 03:35:57
【问题描述】：
我正在创建一个用户界面，允许用户通过拖放界面创建数据库表（及其字段和关系）。
这是我创建的jsFiddle，虽然它看起来有很多事情要做，但实际上它只是演示问题所需的最低限度。这是我的要求，jsPlumb 可以很好地单独处理这些要求，但是当我尝试将它们全部一起完成时遇到了问题。特别是，它结合了 #2 和 #3 是一个问题。
- “表格”可以在画布周围拖动（使用 jsPlumb.draggable()）
- 表格中的“字段”可以通过向上/向下拖动来重新排序（使用jQuery sortable()）
- 用户可以通过拖动在两个不同表格的字段之间绘制新的“关系”
- 任何两个表之间的连接线应在拖动表时自动重新绘制，以便它们始终连接到/从最靠近“另一个表”的一侧
为了完成 #4，我在每个表示字段的“图块”上调用 jsPlumb.makeSource() 和 jsPlumb.makeTarget()，而不是在每个图块的右侧和左侧创建特定端点。这样，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 启动一个连接，或者点击“字段”元素中的任何其他地方都会传递给 jQuery sortable()。
希望这些要求很明确。这是重现问题的方法。
- 从“Foo 1”上的红色图块拖动到“Bar 2”的主体以在两个表之间绘制新关系
- 拖动 foos 表（按其标题）以查看 #4 是否正常工作（所有行都正确重绘）
- 现在将“Foo 1”在“All my Foos”内的项目列表中向下拖动，这样它就不再是列表中最顶部的项目，而是第二个或第三个项目。到目前为止一切顺利，当您拖动时，jsPlumb 会继续正确更新连接线
- 当您拖动 Foos 表来移动它时，就会出现问题。一旦你这样做了，突然连接“Foo 1”和“Bar 2”的线就在错误的地方。不幸的是，我在 stackoverflow 上没有足够的声誉来发布图片。但是尝试一下，您会发现线路跳错了位置。
更奇怪的是，如果你拖动 other table（“All my Bars”表），连接线会跳回两端的正确位置。只有当您拖动位于 jsPlumb 连接的“源”端的表格时，它才会混淆并在错误的位置画线。
【问题讨论】：
-
如何在“All my Foos”内的项目列表中向下拖动“Foo 1”。当我试图拖动它时，什么也没发生。它开始绘制连接器。
-
我的错，jsFiddle使用的是jsPlumb 1.3.8，所以我把它改成了1.5.3。请重试。
-
jsfiddle 在您的问题中仍在使用 1.3.8 版本，我认为您要么忘记更新小提琴或编辑问题中的链接。但是这里是jsfiddle.net/S7gVa/12 链接，我添加了 1.5.3 版本。现在的问题是拖动表格中的项目正在工作，但连接器绘图功能不起作用。在 css 部分
.draggable, .draggable2 { }中也存在语法错误，您输入了 background-cololine-breakr: #e6e6e6 -
我没有意识到 jsFiddle 在 url 中包含修订号。这是更正后的 jsFiddle：jsfiddle.net/vcaha/S7gVa/13