使用jsPlumb将端点添加到部门

Question

I am working with the jsPlumb library where I have a toolbox from which I need to drag and drop elements onto the container and then provide an option for the users to connect the dropped elements within the container.

I am currently able to drag and drop an element. But what I need to do here is to drop the element with the connectors/endpoints(anchors).

I have defined the connector properties as follows.

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"
            }
    };

And once the first element is dropped, I have defined the connector properties over that dropped element.

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);

But am unable to view the connectors on the dropped element. Only the streamdrop div is dropped on the container and the container and the toolbox are disabled according the declared code that follows the connector addition code above.

Any suggestions on why I am unable to view the connectors/endpoints on the dropped element and how to resolve this error will be highly appreciated.

Answer 1

I think u did lot of stuff which is not needed. Suggestion Use - jsPlumb.addEndpoint($(droppedElement),connectorProperties); Can you create a fiddle for better understanding.

var newAgent = $(''); jsPlumb.addEndpoint(newAgent,connectorProperties);