JsPlumb

Question

我正在尝试在创建克隆元素并在拖放区域中拖动时移动端点和锚点，但它保持在同一位置。我放置了 repaintEverything() 方法，但在拖放区域中拖动时没有任何变化。

我看到了一些问题，但我没有找到任何关于在 JsPlumb 中使用动态端点和锚点拖放克隆元素的问题。

如何使端点随克隆元素一起移动以构建流程图并获取放置区域中连接元素的 id 或 classdiv?

这是 fiddle：https://jsfiddle.net/4ypazpk8/

$(".startClass").draggable
({
  helper : 'clone',
  revert : true,
  drag: function(){
    jsPlumb.repaintEverything();
  }
});

$("#dropArea").droppable({

  accept : '.startClass, .activityClass, .endClass',
  containment : 'dropArea',

  drop : function (e, ui) {
  droppedElement = ui.helper.clone();
  $(droppedElement).draggable({containment: "parent"});
  droppedElement.appendTo('#dropArea');
  ui.helper.remove(); //Don't replicate the item

  /* Add endpoint to the start item */
  if(ui.draggable[0].id == "start"){
  //alert("ID: " + ui.draggable[0].id);
    jsPlumb.addEndpoint($(droppedElement), {
      isSource:true,
      isTarget: false,
      connector : "Straight",
      connectorStyle: { strokeWidth:5, stroke:'black'},
      scope:"blueline",
      anchor: "Right"
    });
  }

 }
 });

Answer 1

使用此函数使元素在 jsplumb 中可拖动 jsPlumb.draggable($(droppedElement));

我建议您使用指令使元素可拖动并添加端点。

请仔细阅读以获取更多信息 - element dragging jsplumb

if(ui.draggable[0].id == "start"){
      //alert("ID: " + ui.draggable[0].id);
        jsPlumb.draggable($(droppedElement));
        jsPlumb.addEndpoint($(droppedElement), {
          isSource:true,
          isTarget: false,
          connector : "Straight",
          connectorStyle: { strokeWidth:5, stroke:'black'},

          anchor: "Right"
        });
}

JsPlumb - 具有动态锚点和端点的拖放克隆元素

JsPlumb - Drag and Drop clone element with dynamic anchor and endpoints

jquery

drag-and-drop

flowchart

activity-diagram