JsPlumb - 동적 앵커 및 끝 점이있는 복제 요소 드래그 및 드로어

Question

복제 요소가 만들어지고 드래그 영역에서 드래그 가능하지만 동일한 위치에있을 때 끝점과 앵커를 이동하려고합니다. repaintEverything() 메서드를 사용했지만 드롭 영역에서 드래그 할 때 아무 것도 변경되지 않았습니다.

몇 가지 질문이 있지만 JsPlumb에서 동적 끝점과 앵커를 사용하여 간단한 끌어서 놓기 복제 요소를 다루는 질문을 찾지 못했습니다.

clone 요소로 끝점을 이동하여 플로 차트 다이어그램을 만들고 드롭 영역 div에 연결된 요소의 ID 또는 클래스를 가져 오려면 어떻게해야합니까? 여기

는 바이올린의 : 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" 
     }); 
}