Question

我正在尝试使用拖放选项构建流程图。用户应该能够从一个div拖动一个元素并将其放到另一个div中。

现在我可以拖放了。我给了一个选项，以便在放下块时，锚点应该出现在它们上面。我可以使用js plumb将这些块与连接器链接起来。

我已经为丢弃的块提供了可拖动选项。问题是每当我拖动连接的块时，锚点的位置都不会改变。

如何进行更改，以便每当我拖动任何块时，其锚点和连接线也应该拖动？

这是我的代码： jsPlumb.ready（function（）{

var EndpointOptions = {
    setDragAllowedWhenFull: true,
    endpoint: "Dot",
    maxConnections: 10,

    paintStyle: {
        width: 21,
        height: 21,
        fillStyle: '#666',

    },
    isSource: true,
    connectorStyle: {
        strokeStyle: "#666"
    },
    isTarget: true,
    dropOptions: {
        drop: function(e, ui) {
            alert('drop!');
        }
    }


};



var count = 0;
var x = "";
//Make element draggable
$(".drag").draggable({
    helper: 'clone',
    cursor: 'move',
    tolerance: 'fit',
    revert: true
});

$(".droppable").droppable({
    accept: '.drag',
    activeClass: "drop-area",
    <!--  stop: function( event, ui ) {}, -->
    drop: function(e, ui) {
        if ($(ui.draggable)[0].id !== "") {


            x = ui.helper.clone();
            console.log("x" + JSON.stringify(x));
            ui.helper.remove();
            x.draggable({
                helper: 'original',
                cursor: 'move',
                containment: '.droppable',
                tolerance: 'fit',

                drop: function(event, ui) {
                    $(ui.draggable).remove();


                }
            });


            x.appendTo('.droppable');


            x.addClass('clg');
            $(".clg").each(function() {

                //alert("hello");
                jsPlumb.addEndpoint($(this), EndpointOptions);

            });

        }

        <!-- $(".clg").dblclick(function() { -->

        <!-- //alert("hello"); -->
        <!-- jsPlumb.addEndpoint($(this), EndpointOptions); -->

        <!-- });     -->
        jsPlumb.bind('connection', function(e) {
            jsPlumb.select(e).addOverlay(["Arrow", {
                foldback: 0.2,
                location: 0.65,
                width: 25
            }]);
        });
        console.log("out x" + JSON.stringify(x));

    }

});
});

Answer 1

您可以使用此jsPlumb.repaintEverything（）;

Answer 2

这里我为每个块生成一个id，并根据各自的id添加端点。以下是我的更改：

echo

如何使jsplumb中拖动的块移动？

2 个答案: