使用jsPlumb将端点添加到除法

时间:2017-09-18 06:11:32

标签: javascript object connection anchor jsplumb

我正在使用jsPlumb库,我在其中有一个工具箱,我需要将元素拖放到容器上,然后为用户提供连接容器中已删除元素的选项。

我目前能够拖放一个元素。但我需要做的是删除带有连接器/端点(锚点)的元素。

我已经按如下方式定义了连接器属性。

jsPlumb.ready(function() {

    jsPlumb.setContainer($('#container'));

  //Connector Defaults
    var connectorProperties = {
            isTarget:true,
            isSource:true,
            maxConnections:-1,
            anchors:["Left","Right"],
            endpoint:["Dot",{
                radius:4
            }],
            connector:["Flowchart"],
            connectorStyle:{
                strokeStyle:"5c96bc",
                linewidth:1,
                outlineColor:"transparent",
                outlineWidth:4
            },
            paintStyle:{
                fillStyle:"transparent"
            },
            hoverPaintStyle: {
                fillStyle:"FF0000"
            }
    };

一旦第一个元素被删除,我就已经在被删除的元素上定义了连接器属性。

drop: function (e, ui) {

    var mouseTop = e.clientY;
    var mouseLeft = e.clientX;

    var dropElem = ui.draggable.attr('class');
    droppedElement = ui.helper.clone();
    ui.helper.remove();
    $(droppedElement).removeAttr("class");
    $(droppedElement).draggable({containment: "container"});
    jsPlumb.repaint(ui.helper);


    //If the dropped Element is a TABLE then->
    if (dropElem == "stream ui-draggable ui-draggable-handle") {
        var newAgent = $('<div>');
        jsPlumb.addEndpoint(newAgent,connectorProperties);
        newAgent.attr('id', i).addClass('streamdrop');
        var elemType = "table";
        $("#container").addClass("disabledbutton");
        $("#toolbox").addClass("disabledbutton");

        $('#container').append(newAgent);

但是我无法查看被删除元素上的连接器。只有streamdrop div被删除在容器上,并且根据上面连接器添加代码之后的声明代码禁用容器和工具箱。

enter image description here

有关我无法查看已删除元素上的连接器/端点以及如何解决此错误的任何建议将受到高度赞赏。

1 个答案:

答案 0 :(得分:0)

我认为你做了很多不需要的东西。建议使用 - jsPlumb.addEndpoint($(droppedElement),connectorProperties); 你可以创造一个小提琴,以便更好地理解。

  

var newAgent = $(&#39;&#39;);           jsPlumb.addEndpoint(newAgent,connectorProperties);