克隆对象然后在包含中拖动时的jsplumb

Question

我正在尝试将此demo 中的黑色对象拖到蓝色框中。 我创建了一个黑色物体的克隆，一旦它被放置在蓝色区域， 我正在添加jsplumb连接器，我希望能够再次拖动它 在蓝色区域内。它似乎不起作用。有人可以告诉我问题在哪里，以及我是否包括正确的库。黑匣子仅在第一次包含在蓝色区域中而不是之后。 感谢

js

$(document).ready(function () {
    $("#drop").append("<div id='con' class='container'></div>");
        var x = null;
    $(".draggable").draggable({
        helper: 'clone',
        cursor: 'pointer',
        tolerance: 'fit',
        clone: true,
        containment: '.container',
        obstacle: '.draggable',
        preventCollision: true,
        revert: true
    });

    $("#drop").droppable({
        accept: '.draggable',
        containment: '.container',
        drop: function (e, ui) {
            if ($(ui.draggable)[0].id != "") {
                x = ui.helper.clone();
                ui.helper.remove();             
                jsPlumb.draggable(x, {
                //x.draggable({
                    containment: '.container',
                    drop: function (event, ui) {    
                        jsPlumb.repaintEverything();
                    },
                    drag: function (e, ui) {
                        jsPlumb.repaintEverything();
                    }
                });
                x.appendTo('.container');
                addConnectors(x); 
            }
            //jsPlumb.repaintEverything();
        }
    });

});

function addConnectors(x) {
    var topEndPoint = { isSource:true, isTarget:true, connector: ["Straight"],
            endpoint:['Dot', {radius:5}], outlineColor:"blue", outlineWidth:1,
            anchor:"Top", paintStyle: {fillStyle:"red"}};
    var bottomEndPoint = { isSource:true, isTarget:true, connector: ["Straight"],
            endpoint:['Dot', {radius:5}], outlineColor:"blue", outlineWidth:1,
            anchor:"Bottom", paintStyle: {fillStyle:"red"}};
            jsPlumb.addEndpoint(x, topEndPoint);
            jsPlumb.addEndpoint(x, bottomEndPoint);
}