パレットからドリルダウンされたdivにエンドポイントを添付する

Question

私はドラッグアンドクローンシステムを開発しています。だから私は2種類の形状（円と長方形）を含むパレットを持って、私はこれらの図形をドラッグし、別のdivにそれらを複製します。 パレット上の図形にアンカーを付けたい場合、テーマを別のdivにドラッグアンドクローンすると、再びドラッグされますが、ドラッグするとアンカーがシェイプから切り離されます。

これを達成する方法を教えていただければ非常に役に立ちます。そこ

ISAはあなたがあなたのコンポーネントを追加した後、そのあとにエンドポイントを追加する必要があり、あなたがあなたのjsfidlleにJsPlumbライブラリを追加する必要がjsfiddle

$('.startEventClass').draggable({ 
 
    helper: "clone", 
 
}); 
 

 
$('.userTaskClass').draggable({ 
 
    helper: "clone", 
 
}); 
 

 
$('.endEventClass').draggable({ 
 
    helper: "clone", 
 
}); 
 

 
$('#diagramZone').droppable({ 
 
    accept: ".startEventClass, .userTaskClass, .endEventClass", 
 
    drop: function(e, ui) { 
 
    dragE1 = ui.helper.clone(); 
 
    dragE1.draggable({ 
 
     containment: "#diagramZone", 
 
    }); 
 
    $(dragE1).removeClass("startEventClass"); 
 
    $(dragE1).addClass("startEventClass"); 
 
    if (ui.draggable[0].id) { 
 
     dragE1.appendTo('#diagramZone'); 
 
    } 
 
    } 
 
})

.startEventClass { 
 
    width: 40px; 
 
    height: 40px; 
 
    margin-top: 20px; 
 
    margin-left: 20px; 
 
    margin-bottom: 30px; 
 
    border: solid 2px; 
 
    border-radius: 50px; 
 
} 
 

 
.userTaskClass { 
 
    width: 120px; 
 
    height: 60px; 
 
    margin-top: 20px; 
 
    margin-left: 20px; 
 
    margin-bottom: 30px; 
 
    border: solid 2px; 
 
    border-radius: 5px; 
 
} 
 

 
.endEventClass { 
 
    width: 40px; 
 
    height: 40px; 
 
    margin-top: 20px; 
 
    margin-left: 20px; 
 
    margin-bottom: 30px; 
 
    border: solid 5px; 
 
    border-radius: 50px; 
 
} 
 

 
#diagramZone { 
 
    height: 200px; 
 
    border: solid 1px; 
 
}

<div id="startEvent" class="startEventClass"> 
 

 
</div> 
 

 
<div id="userTask" class="userTaskClass"></div> 
 

 
<div id="endEvent" class="endEventClass"></div>

Answer 1

私jsfiddleコードにリンク図ゾーン。

jsfiddleを更新しました。私が助けてくれることを願っています。 Htmlの

<div id="startEvent" class="startEventClass"></div> 
<div id="userTask" class="userTaskClass"></div> 
<div id="endEvent" class="endEventClass"></div> 
<div id="diagramZone" class="col-md-8" id="diagramZone"></div> 

のCss

.startEventClass { 
    width: 40px; 
    height: 40px; 
    margin-top: 20px; 
    margin-left: 20px; 
    margin-bottom: 30px; 
    border: solid 2px; 
    border-radius: 50px; 
} 

.userTaskClass { 
    width: 120px; 
    height: 60px; 
    margin-top: 20px; 
    margin-left: 20px; 
    margin-bottom: 30px; 
    border: solid 2px; 
    border-radius: 5px; 
} 

.endEventClass { 
    width: 40px; 
    height: 40px; 
    margin-top: 20px; 
    margin-left: 20px; 
    margin-bottom: 30px; 
    border: solid 5px; 
    border-radius: 50px; 
} 

#diagramZone { 
    height: 200px; 
    border: solid 1px; 
} 

Javascriptを

$('.startEventClass').draggable({ 
    helper: "clone", 
}); 

$('.userTaskClass').draggable({ 
    helper: "clone", 
}); 

$('.endEventClass').draggable({ 
    helper: "clone", 
}); 

$('#diagramZone').droppable({ 
    accept: ".startEventClass, .userTaskClass, .endEventClass", 
    drop: function(e, ui) { 
    dragE1 = ui.helper.clone(); 
    dragE1.draggable({ 
     containment: "#diagramZone", 
    }); 
    if (ui.draggable[0].id) { 
     dragE1.appendTo('#diagramZone'); 

     if ($(dragE1).hasClass("startEventClass")) { 
      jsPlumb.addEndpoint($(dragE1), { 
       isSource: true, 
       anchor: [1, 0.5, 0, 0], 
       connectorStyle: { strokeStyle: "#316b31", lineWidth: 2 }, 
        connectorHoverStyle: { lineWidth: 4 }, 
        connector: ["Bezier", { curviness: 10 } ], 
        maxConnections: 1, 
        isTarget: false 
      }); 
     } else if ($(dragE1).hasClass("userTaskClass")) { 
      jsPlumb.addEndpoint($(dragE1), { 
       isSource: false, 
       anchor: [0, 0.5, 0, 0], 
       connectorStyle: { strokeStyle: "#316b31", lineWidth: 2 }, 
        connectorHoverStyle: { lineWidth: 4 }, 
        connector: ["Bezier", { curviness: 10 } ], 
        maxConnections: 1, 
        isTarget: true 
      }); 
      jsPlumb.addEndpoint($(dragE1), { 
       isSource: true, 
       anchor: [1, 0.5, 0, 0], 
       connectorStyle: { strokeStyle: "#316b31", lineWidth: 2 }, 
        connectorHoverStyle: { lineWidth: 4 }, 
        connector: ["Bezier", { curviness: 10 } ], 
        maxConnections: 1, 
        isTarget: false 
      }); 
     } else if ($(dragE1).hasClass("endEventClass")) { 
      jsPlumb.addEndpoint($(dragE1), { 
       isSource: false, 
       anchor: [0, 0.5, 0, 0], 
       connectorStyle: { strokeStyle: "#316b31", lineWidth: 2 }, 
        connectorHoverStyle: { lineWidth: 4 }, 
        connector: ["Bezier", { curviness: 10 } ], 
        maxConnections: 1, 
        isTarget: true 
      }); 
     } 
    } 
    } 
});