Question

我正在尝试在创建克隆元素时移动端点并锚定并在拖放区域中拖动，但它保持在相同的位置。我推出了repaintEverything（）方法，但在拖放区域拖动时没有任何变化。

我看到了一些问题，但是我没有发现任何问题，这些问题与JsPlumb中动态端点和锚点的简单拖放克隆元素有关。

如何使用clone元素移动端点以构建流程图并获取drop区域div中连接元素的id或类？

$(".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 - 使用动态锚点和端点拖放克隆元素

1 个答案: