Динамически созданные элементы не перетаскиваются - PullRequest
Новая
       23

Динамически созданные элементы не перетаскиваются

2 голосов
/ 14 июня 2019

У меня есть простой блок, его элемент динамически добавляется в 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);

});

Вот живое демо Живое демо

Вот плункер полный исходный код

В приведенной выше демонстрации просто щелкните правой кнопкой мыши, чтобы добавить блок фильма для тестирования

Почему перетаскивание не работает для динамически создаваемых элементов?

1 Ответ

1 голос
/ 25 июня 2019

вот пример страница Я сделал некоторое время назад, когда впервые обнаружил «jsplumb», он делает именно то, что вы хотите, поэтому вы можете захотеть использовать его или построить поверх него.
Помните, что вы действительно должны вызывать метод draggable после добавления элементов в DOM, мой пример очень прост:

  • это не нужно jsplumb.fire
  • это не нуждается в .ready привязке
  • он не нуждается в пакетной обработке, предлагаемой jsplumb

чтобы избежать проблем, таких как готовность и другие, которые я все еще пытаюсь освоить.

...