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

问题描述：

我正在尝试使用拖放选项来构建流程图。用户应该能够从一个div中拖动一个元素并将其放到另一个div中。如何使锚点相对于在jsplumb中拖动的块进行移动？

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

我已经给出了拖放块的可拖动选项。问题是，只要我拖动连接的块，锚的位置不会改变。

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

这里是我的代码： 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)); 

    } 

}); 
});

答

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

感谢，但同时拖动块，我们不能拖到终点 –

你应注意什么？能够，我创建一个新的块时只使用这个 jsPlumb.draggable（id，{ containment：true }）;所以你可能想玩，直到它的工作 – Stephan231

答

在这里，我产生每个块的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中拖动的块进行移动？

相关推荐