Question

我有动态创建的节点（由yui3库提供）。所有节点都创建为与html-elements相同的子节点。

然而，在设计方面，一些节点必须是其他元素的端点。

对于连接绘图，我使用jsPlumb库。

实施例

HTML代码：

<html>
 <body>
  <div class="window" style="height: 150; width: 100; top: 50; left:50">parent</div>
  <div class="ep" style="height: 10; width: 10; top: 55; left:45">1</div>
  <div class="ep" style="height: 10; width: 10; top: 70; left:45">2</div>
 </body>
</html>

我想要那＆＃34; 1＆＃34;和＆＃34; 2＆＃34;元素将是＆＃34; parent＆＃34; -element的端点。

所有元素都应该是可拖动的＆＃34;孩子＆＃34;分歧应该与父母一起移动＆＃34;分裂。

如何解决这个问题？

感谢您的关注，尤金。

问题：

如何将现有分区作为其他元素（节点）的端点？
如何通过拖动＆＃34; parent＆＃34;来拖动元素列表元件
使用yui3的解决方案也非常有用。

我的研究：

有＆＃34; addEndpoint＆＃34;在jsPlumb库中的函数。但是此函数为端点创建新节点。我不了解使用我的设计绘制端点的方法（即不是标准的矩形或圆形）以及某些元素属性设置的正确方法。
我尝试制作层次化的html文档，但是这种情况产生了下一个问题：在子层绘制的连接。经过几周的纠正这个错误的尝试后，我选择了当前的版本。

Answer 1

引自问题

有＆＃34; addEndpoint＆＃34;在jsPlumb库中的函数。但是此函数为端点创建新节点。我不了解用我的设计绘制端点的方法（即不是标准的矩形或圆形）以及一些元素属性设置的正确方法。

文档 - http://jsplumbtoolkit.com/doc/endpoints.html

有多种方法可以自定义端点，当然使用你自己的html元素，会有麻烦 - 我没有看到这样做的一个很好的理由（更好地在jsPlumb上下文中有东西，因为那里有很多处理程序/事件/查询来处理）。您可以自定义有关端点的所有内容。

演示 - http://jsplumbtoolkit.com/demo/

如果您已经尝试过关于外观和外观的事情。终点的感觉并没有奏效，你可以告诉我们。恕我直言，使用图像作为端点的能力可以满足所有用例。

以下是如何删除连接＆amp;终点：

jsPlumb.getConnections({
            //source: id (you can delete selectively by querying what you want)
        }).forEach(function (conn) {
             jsPlumb.detach(conn);
        });

jsPlumb.selectEndpoints({
            //source: id (you can delete selectively by querying what you want)
        }).each($.proxy(function (ele) {
            var uuid = ele.getUuid();
            jsPlumb.deleteEndpoint(uuid);
        }, this));

还有像：

这样的短手

jsPlumb.deleteEveryEndpoint();

jsPlumb.detachEveryConnection();

jsPlumb：如何从分区到端点进行修改？

1 个答案: