動態創建的元素不可拖動

Question

我有一個簡單的塊，它的元素動態添加到 DOM，我希望用戶能夠創建一個塊，並且它應該可以使用 jsplumb 庫進行拖動。

不幸的是，現在我可以創建元素但它們不可拖動，但如果我手動將它們添加到 dom，它是可拖動的。

這是我到目前為止所擁有的

function addMovieButton() {

    var newMovieBlockButton = $("<div class='movie-button w'>Button New<div class='ep' action='begin'></div><div>");

}

這是 plumb.js

jsPlumb.ready(function () {

    // setup some defaults for jsPlumb.
    var instance = jsPlumb.getInstance({
        Endpoint: ["Dot", {radius: 5}],
        Connector:"StateMachine",
        HoverPaintStyle: {stroke: "#1e8151", strokeWidth: 2 },
        ConnectionOverlays: [
            [ "Arrow", {
                location: 1,
                id: "arrow",
                length: 14,
                foldback: 0.8
            } ],
            [ "Label", { label: "FOO", id: "label", cssClass: "aLabel" }]
        ],
        Container: "canvas"
    });

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

    window.jsp = instance;

    var canvas = document.getElementById("canvas");
    var windows = jsPlumb.getSelector(".statemachine-demo .w");
    var windows_movie = jsPlumb.getSelector(".statemachine-demo .movie-block ");

    // bind a click listener to each connection; the connection is deleted. you could of course
    // just do this: jsPlumb.bind("click", jsPlumb.detach), but I wanted to make it clear what was
    // happening.
    instance.bind("click", function (c) {
        instance.deleteConnection(c);
    });

    // bind a connection listener. note that the parameter passed to this function contains more than
    // just the new connection - see the documentation for a full list of what is included in 'info'.
    // this listener sets the connection's internal
    // id as the label overlay's text.
    instance.bind("connection", function (info) {
        info.connection.getOverlay("label").setLabel(info.connection.id);
    });

    // bind a double click listener to "canvas"; add new node when this occurs.
    jsPlumb.on(canvas, "dblclick", function(e) {
      //  newNode(e.offsetX, e.offsetY);
    });

    //
    // initialise element as connection targets and source.
    //
    var initNode = function(el) {

        // initialise draggable elements.
        instance.draggable(el);

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

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

        // this is not part of the core demo functionality; it is a means for the Toolkit edition's wrapped
        // version of this demo to find out about new nodes being added.
        //
        instance.fire("jsPlumbDemoNodeAdded", el);
    };

    // suspend drawing and initialise.
    instance.batch(function () {
        for (var i = 0; i < windows.length; i++) {
            initNode(windows[i], true);
            console.log(windows[i]);
        }
        for (var j = 0; j < windows_movie.length; j++) {
            initNode(windows_movie[j], true);
            console.log(windows_movie[j]);
        }


    });

    jsPlumb.fire("jsPlumbDemoLoaded", instance);

});

這是現場演示現場演示

這是plunker的完整源代碼

在上面的演示中，只需右鍵單擊添加電影塊進行測試

為什么可拖動不能用於動態創建的元素？

Answer 1

這是我不久前第一次發現“jsplumb”時制作的示例頁面，它完全符合您的要求，因此您可能想要使用它或在它之上構建。
請記住，確實應該在將元素添加到 DOM 后調用draggable方法，我的示例非常簡單：

• 它不需要jsplumb.fire
• 它不需要.ready綁定
• 它不需要 jsplumb 提供的“批處理”處理

這樣您就可以避免諸如准備范圍之類的問題以及我仍在努力掌握的其他問題。