Endpunkt an ein Div-Zeichen aus einer Palette anhängen

Question

Ich entwickle ein Drag-and-Clone-System. So habe ich eine Palette mit zwei Arten von Form (Kreis und Rechteck), ich ziehe diese Formen und klonen sie in einem separaten Div. Ich möchte einen Ancheor an die Formen auf der Palette anhängen, und wenn ich das Thema in das separate div ziehe und klicke, ziehe ich es erneut, aber wenn ich es ziehe, wird der Anker von der Form gelöst.

es wird sehr hilfreich sein, wenn Sie mir sagen können, wie das zu erreichen ist.

Es verknüpft isa meinen jsfiddle Code 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

Sie benötigten, um die JsPlumb Bibliothek auf Ihrem jsfidlle hinzuzufügen, nach, dass Sie die Endpunkte hinzufügen müssen, nachdem Sie Ihre Komponenten hinzugefügt die Diagrammzone.

Ich aktualisierte Ihre jsfiddle, ich hoffe, ich habe geholfen.

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 
      }); 
     } 
    } 
    } 
});