jsPlumb没有将行拖到端点

Question

我对jsPlumb很新，我试图绕过它。看看这个链接：http://thejohnkay.com/jsplumb。当您从左侧拖动对象并将其放在右侧区域时，我将其放到创建元素的位置以及它们各自的端点我只能通过拖动锚点来创建彼此的线条＆＃＆＃ 39; s让我疯了。

我处理的主要文件是http://thejohnkay.com/jsplumb/js/main.js

Answer 1

我使用 Working Fiddle

复制了您的问题

你唯一应该做的就是将你的main.js脚本包装在dom-ready块

中

我做了一些修正，下面是main.js

$(function () {
    "use strict";

    var jsPlumbMaster = function () {
        //function jsPlumbMaster(){
        if (typeof jsPlumb !== 'undefined') {
            this.countBox = 0;
            this.instance = jsPlumb.getInstance({
                // default drag options
                DragOptions: {
                    cursor: 'pointer',
                    zIndex: 2000
                },
                // the overlays to decorate each connection with.  note that the label overlay uses a function to generate the label text; in this
                // case it returns the 'labelText' member that we set on each connection in the 'init' method below.
                ConnectionOverlays: [
                    ["Arrow", {
                        location: 1
                    }],
                    ["Label", {
                        location: 0.1,
                        id: "label",
                        cssClass: "aLabel"
                    }]
                ],
                Container: $(".drop-area")
            });
        }
    };

    jsPlumbMaster.prototype = {
        connectorPaintStyle: {
            lineWidth: 4,
            strokeStyle: "#61B7CF",
            joinstyle: "round",
            outlineColor: "white",
            outlineWidth: 2
        },
        // .. and this is the hover style.
        connectorHoverStyle: {
            lineWidth: 4,
            strokeStyle: "#216477",
            outlineWidth: 2,
            outlineColor: "white"
        },
        endpointHoverStyle: {
            fillStyle: "#216477",
            strokeStyle: "#216477"
        },
        // the definition of source endpoints (the small blue ones)
        sourceEndpoint: {
            endpoint: "Dot",
            paintStyle: {
                strokeStyle: "#7AB02C",
                fillStyle: "transparent",
                radius: 7,
                lineWidth: 3
            },
            isSource: true,
            connector: ["Flowchart", {
                stub: [40, 60],
                gap: 10,
                cornerRadius: 5,
                alwaysRespectStubs: true
            }],
            connectorStyle: this.connectorPaintStyle,
            hoverPaintStyle: this.endpointHoverStyle,
            connectorHoverStyle: this.connectorHoverStyle,
            dragOptions: {},
            overlays: [
                ["Label", {
                    location: [0.5, 1.5],
                    label: "Drag",
                    cssClass: "endpointSourceLabel"
                }]
            ]
        },
        // the definition of target endpoints (will appear when the user drags a connection)
        targetEndpoint: {
            endpoint: "Dot",
            paintStyle: {
                fillStyle: "#7AB02C",
                radius: 11
            },
            hoverPaintStyle: this.endpointHoverStyle,
            maxConnections: -1,
            dropOptions: {
                hoverClass: "hover",
                activeClass: "active"
            },
            isTarget: true,
            overlays: [
                ["Label", {
                    location: [0.5, -0.5],
                    label: "Drop",
                    cssClass: "endpointTargetLabel"
                }]
            ]
        },
        init: function (connection) {
            connection.getOverlay("label").setLabel(connection.sourceId.substring(15) + "-" + connection.targetId.substring(15));
            connection.bind("editCompleted", function (o) {
                if (typeof console != "undefined") console.log("connection edited. path is now ", o.path);
            });
        },
        addToStage: function (top, left, label) {
            //var top  = parseInt(moveQueue[0][0]);
            //var left = parseInt(moveQueue[0][1]);

            $('<div>', {
                'class': 'window',
                    'id': ('flowchart' + this.countBox)
            })
                .css({
                left: left,
                top: top,
                position: 'absolute'
            })
                .text(label)
                .appendTo($('.drop-area'));
            //console.log(this.instance)
            this._addEndpoints($('#flowchart' + this.countBox), ["LeftMiddle", "BottomCenter"], ["TopCenter", "RightMiddle"]);
            this.countBox++;


            this.instance.draggable($(".drop-area .window"), {
                grid: [20, 20],
                containment: 'body'
            });

        },
        _addEndpoints: function (toId, sourceAnchors, targetAnchors) {
            for (var i = 0; i < sourceAnchors.length; i++) {
                var sourceUUID = toId + sourceAnchors[i];
                console.log(sourceUUID);
                this.instance.addEndpoint(toId, this.sourceEndpoint, {
                    anchor: sourceAnchors[i],
                    uuid: sourceUUID
                });
            }
            for (var j = 0; j < targetAnchors.length; j++) {
                var targetUUID = toId + targetAnchors[j];
                this.instance.addEndpoint(toId, this.targetEndpoint, {
                    anchor: targetAnchors[j],
                    uuid: targetUUID
                });
            }
        }
    };


    var JPM = new jsPlumbMaster();

    $(document).ready(function () {

        $('.panel').draggable({
            containment: 'body',
            stop: function (e, ui) {
                var top = parseInt($(this).css('top'), 10) + 250;
                var left = parseInt($(this).css('left'), 10);
                var label = $(this).text();
                if (left >= parseInt($('#left-col').width(), 10)) {
                    $(this).remove();
                    left = left - 250;
                    JPM.addToStage(top, left, label);
                }
            }
        });

        $('#box').keyup(function () {
            var valThis = $(this).val().toLowerCase();
            $('.filter .panel .category').each(function () {
                var text = $(this).text().toLowerCase();
                if (text.indexOf(valThis) > -1) $(this).closest('.panel').fadeIn('fast');
                else $(this).closest('.panel').fadeOut('fast');
            });
        });
    }).foundation();

});