JSPlumb 状态机连接从另一个包含可拖动 div 的容器拖放多个 div

Question

我有两个 div，一个包含可拖动的 div，另一个 div 接受 drop：

HTML

<div class="divContainer">
    <div class="dragMe header active" id="header">
        Header
    </div>

    <div class="dragMe source ui-state-disabled" id="source" >
        Source
    </div>
    <div class="dragMe target ui-state-disabled" id="target" >
        Target
    </div>
    <div class="dragMe fields ui-state-disabled " id="fields" >
        Fields Selection
    </div>

    <div class="dragMe options ui-state-disabled " id="options" ">Additional Options</div>
    <div class="dragMe summary ui-state-disabled" id="summary" >
        Summary
    </div>
</div>

容器就像

<div class="divDropzone ">
</div>

现在我可以拖放 divDropZone 并在它们之间画一条线 jsplumb 在拖放功能上。

jQuery 代码：

$(".divDropzone").droppable({
    drop: function (event, ui) {
        $.ui.ddmanager.current.cancelHelperRemoval = true;

        var dropElem = ui.draggable.attr('id');

        $(".divContainer #" + dropElem).draggable({
            disabled: true,
            cursor: "none"
        }).removeClass('active');


        if ($.inArray(dropElem, nodes) < 0) 
        {
            dropId = dropElem + '_dropped';
            nodes.push(dropId);
            if (items.length == 0) {
                items[0] = dropId;
                items[1] = null;
            }
            else {
                items[1] = items[0];
                items[0] = dropId;
            }
        }

        $(this).find("div." + dropElem).attr("id", dropId);

        $(".divDropzone #" + dropId).draggable({
            containment: "parent",
        }).removeClass('active');

        if (dropElem == "header") {
        }

        else if (dropElem == "source") {
            connect("header_dropped","source_dropped");
        }

        else if (dropElem == "target") {
            connect("source_dropped","target_dropped");
        }

        else if (dropElem == "fields") {
            connect("target_dropped","fields_dropped");
        }

        else if (dropElem == "options") {
            connect("fields_dropped","options_dropped");
        }

        else if (dropElem == "summary") {
            connect("options_dropped","summary_dropped");
        }
    }
});

而jsplumb 代码是...

function jspsample(source, target) {

    //jsPlumb.repaintEverything();
    jsPlumb.ready(function () {
        var instance = jsPlumb.getInstance({
            Endpoint: ["Dot", { radius: 2 }],
            Connector: "StateMachine",
            HoverPaintStyle: { strokeStyle: "#1e8151", lineWidth: 2 },
            ConnectionOverlays: [
                ["Arrow", {
                    location: 1,
                    id: "arrow",
                    length: 14,
                    foldback: 0.8
                }],
                //[ "Label", { label: "FOO", id: "label", cssClass: "aLabel" }]
            ],
            Container: "divDropzone"
        });

        instance.registerConnectionType("basic", { anchor: "Continuous", connector: "StateMachine" });

        window.jsp = instance;

            var windows = jsPlumb.getSelector(".divDropzone .dragMe");

            var initNode = function (el) {

                instance.draggable(el);

                instance.makeSource(el, {
                    filter: ".ep",
                    anchor: "Continuous",
                    connectorStyle: { strokeStyle: "#5c96bc", lineWidth: 2, outlineColor: "transparent", outlineWidth: 4 },
                    connectionType: "basic",
                    extract: {
                        "action": "the-action"
                    },
                    maxConnections: 2,
                    onMaxConnections: function (info, e) {
                        alert("Maximum connections (" + info.maxConnections + ") reached");
                    }
                });

                instance.makeTarget(el, {
                    dropOptions: { hoverClass: "dragHover" },
                    anchor: "Continuous",
                    allowLoopback: false
                });

                instance.fire("jsPlumbDemoNodeAdded", el);
            };

            instance.batch(function () {
                for (var i = 0; i < windows.length; i++) {
                    initNode(windows[i], true);

                }
               var cssClass=source+"_"+target;
                instance.connect({
                    source: source,
                    target: target,
                    type: "basic",
                    cssClass: cssClass
                });

            });
            jsPlumb.fire("jsPlumbDemoLoaded", instance);

    });
}

代码运行良好。箭头在下降时具有约束力。但问题是当我在divDropZone 中拖放 div 时，所有连接都没有跟随拖动元素。只有目标端点只移动而不是源端点....

我已经尝试了所有我可以但没有用的......

我该如何解决这个问题？

Answer 1

自己解决了...

代码是这样的

var instance = [];
    var initNode;
    jsPlumb.ready(function () {

        instance = jsPlumb.getInstance({
            Endpoint: ["Dot", { radius: 2 }],
            Connector: "StateMachine",
            HoverPaintStyle: { strokeStyle: "#1e8151", lineWidth: 2 },
            ConnectionOverlays: [
                ["Arrow", {
                    location: 1,
                    id: "arrow",
                    length: 14,
                    foldback: 0.8
                }],
                ["Label", { label: "FOO", id: "label", cssClass: "aLabel" }]
            ],
            Container: "divDropzone"
        });


        instance.registerConnectionType("basic", { anchor: "Continuous", connector: "StateMachine" });
        window.jsp = instance;
        //windows = jsPlumb.getSelector(".divDropzone .dragMe");
        initNode = function (el) {
            // initialise draggable elements.
            instance.draggable(el);
            // instance.draggable(source);

            instance.makeSource(el, {
                filter: ".ep",
                anchor: "Continuous",
                connectorStyle: { strokeStyle: "#5c96bc", lineWidth: 2, outlineColor: "transparent", outlineWidth: 4 },
                connectionType: "basic",
                extract: {
                    "action": "the-action"
                },
                maxConnections: 2,
                onMaxConnections: function (info, e) {
                    alert("Maximum connections (" + info.maxConnections + ") reached");
                }
            });

            instance.makeTarget(el, {
                dropOptions: { hoverClass: "dragHover" },
                anchor: "Continuous",
                allowLoopback: false
            });

            instance.fire("jsPlumbDemoNodeAdded", el);
        };

    });

    $(function () {

        $("#header").draggable({
            helper: "clone",
            revert: "invalid",
            appendTo: ".divDropzone",
            distance: 50,
            //addClasses: false
        });

        $("#source,#target,#fields,#options,#summary,#field").draggable({
            disabled: true,

        });

        var nodes = [];
        var dropId;

        //drop zone
        $(".divDropzone").droppable({
            drop: function (event, ui) {
                $.ui.ddmanager.current.cancelHelperRemoval = true;

                var dropElem = ui.draggable.attr('id');

                if ($.inArray(dropElem, nodes) < 0) {

                    dropId = dropElem + '_dropped';
                    nodes.push(dropId);

                }

                $(this).find("div." + dropElem).attr("id", dropId);

                $(".divDropzone #" + dropId).draggable({
                    containment: "parent",
                });

                if (dropElem == "header") {
                    //var windows = jsPlumb.getSelector(".divDropzone .dragMe");
                    //initNode('header_dropped', true);

                }

                else if (dropElem == "source") {
                    adterDrop('target');
                }

                else if (dropElem == "target") {
                    jsPlumb.repaintEverything();
                    var windows = jsPlumb.getSelector(".divDropzone .dragMe");
                    instance.bind("connection", function (info) {
                        info.connection.getOverlay("label").setLabel(info.connection.id);
                    });
                    instance.batch(function () {
                        for (var i = 0; i < windows.length; i++) {
                            initNode(windows[i], true);
                        }
                        instance.connect({
                            source: "source_dropped",
                            target: "target_dropped",
                            type: "basic"
                        });
                    });
                                        }

                else if (dropElem == "fields") {
                    jsPlumb.repaintEverything();
                    var windows = jsPlumb.getSelector(".divDropzone .dragMe");
                    instance.bind("connection", function (info) {
                        info.connection.getOverlay("label").setLabel(info.connection.id);
                    });
                    instance.batch(function () {
                        for (var i = 0; i < windows.length; i++) {
                            initNode(windows[i], true);
                        }
                        instance.connect({
                            source: "target_dropped",
                            target: "fields_dropped",
                            type: "basic"
                        });
                    });

                }
            }
      });