如何使锚点相对于在 jsplumb 中拖动的块移动？

Question

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

现在我可以拖放了。我给出了一个选项，这样在放下方块时，锚点应该出现在它们上面。而且我能够使用 js plumb link 这些带有连接器的块。

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

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

这是我的代码： jsPlumb.ready(函数() {

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 添加端点。这是我的更改：

if(null == ui.draggable.attr('id')){
            if( ui.draggable.attr('class').indexOf('rule') != -1){
                clone.attr('id', 'rule_' + i);
                jsPlumb.addEndpoint(clone,{anchors: ["Left"]}, EndpointOptions);
            } else {
                clone.attr('id', 'event_' + i);
                jsPlumb.addEndpoint(clone, {anchors: ["Left"]}, EndpointOptions);
            }
i++;

如何使锚点相对于在 jsplumb 中拖动的块移动？

How to make anchor move with respect to a block dragged in jsplumb?

drag-and-drop

jsplumb