Jquery jsPlumb不将线拖动到端点

我对jsPlumb很陌生，我正试着去了解它。查看此链接：。当你从左边拖拽对象并把它放到右边的区域，我把它放到了它创建元素和它们各自的端点的地方，我只是不能通过拖拽锚来创建线，这让我发疯

---

我处理的主要文件是

我用这个文件复制了你的问题

您应该做的唯一一件事是将main.js脚本包装到dom就绪块中

我做了一些更正，下面是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();

});

$（函数（）{
“严格使用”；
var jsPlumbMaster=函数（）{
//函数jsmaster（）{
如果（jsPlumb的类型！=“未定义”）{
this.countBox=0；
this.instance=jsPlumb.getInstance({
//默认拖动选项
DragOptions：{
光标：“指针”，
zIndex:2000
},
//用于装饰每个连接的覆盖。请注意，标签覆盖使用一个函数来生成标签文本；在此
//case返回我们在下面的“init”方法中为每个连接设置的“labelText”成员。
连接概述：[
[“箭头”{
地点：1
}],
[“标签”{
位置：0.1，
id:“标签”，
cssClass：“阿拉贝尔”
}]
],
容器：$（“.drop area”）
});
}
};
jsPlumbMaster.prototype={
connectorPaintStyle：{
线宽：4，
strokeStyle:#61B7CF“，
joinstyle:“圆形”，
大纲颜色：“白色”，
大纲图第1页第2页
},
//…这是悬停式。
连接器悬停样式：{
线宽：4，
strokeStyle:#216477“，
大纲第1页第2页，
大纲颜色：“白色”
},
端点悬停样式：{
填充样式：“216477”，
strokeStyle:#216477"
},
//源端点的定义（蓝色小端点）
sourceEndpoint：{
端点：“点”，
画风：{
strokeStyle:#7AB02C“，
fillStyle:“透明”，
半径：7，
线宽：3
},
来源：是的，
连接器：[“流程图”{
存根：[40,60]，
差距：10，
转弯半径：5，
alwaysRespectStubs：正确
}],
connectorStyle:this.connectorPaintStyle，
hoverPaintStyle:this.endpointHoverStyle，
connectorHoverStyle:this.connectorHoverStyle，
dragOptions:{}，
覆盖层：[
[“标签”{
位置：[0.5,1.5]，
标签：“拖动”，
cssClass:“endpointSourceLabel”
}]
]
},
//目标端点的定义（当用户拖动连接时将显示）
目标端点：{
端点：“点”，
画风：{
填充样式：“7AB02C”，
半径：11
},
hoverPaintStyle:this.endpointHoverStyle，
maxConnections:-1，
删除选项：{
悬停类：“悬停”，
活动类：“活动”
},
isTarget:没错，
覆盖层：[
[“标签”{
位置：[0.5，-0.5]，
标签：“放下”，
cssClass:“endpointTargetLabel”
}]
]
},
初始化：函数（连接）{
connection.getOverlay（“label”）.setLabel（connection.sourceId.substring（15）+“-”+connection.targetId.substring（15））；
连接绑定（“编辑完成”，函数（o）{
if（typeof console！=“undefined”）console.log（“连接已编辑。路径现在为”，o.path）；
});
},
addToStage:功能（顶部、左侧、标签）{
//var top=parseInt（moveQueue[0][0]）；
//var left=parseInt（moveQueue[0][1]）；
$('', {
“类”：“窗口”，
id:（“流程图”+此.countBox）
})
.css({
左:左,，
顶:顶,，
位置：'绝对'
})
.文本（标签）
.appendTo（$（'.drop area'））；
//console.log（this.instance）
这个._添加点（$（“#流程图”+这个计数框），[“左中”、“下中”]、[“上中”、“右中”]；
这个.countBox++；
this.instance.draggable（$（“.drop area.window”）{
网格：[20,20]，
遏制：“身体”
});
},
_添加点：函数（toId、源锚点、目标锚点）{
对于（var i=0；i