Ich möchte in der Lage sein, eine Kopie des Elements zu erstellen, das ich ziehen möchte. Ich benutze die Standard-Ui ziehbar und abfallbar. Ich weiß über die Helper-Klon-Option. aber das erstellt keine Kopie. Der gezogene Gegenstand wird in die ursprüngliche Position zurückversetzt.Klonknoten beim Ziehen
Mark,
dieses Beispiel:
$(document).ready(function(){
$(".objectDrag").draggable({helper:'clone'});
$("#garbageCollector").droppable({
accept: ".objectDrag",
drop: function(event,ui){
console.log("Item was Dropped");
$(this).append($(ui.draggable).clone());
}
});
});
Und die Html sieht aus wie dieses
<div class="objectDrag"
style="width:10%; color:white;border:black 1px solid; background-color:#00A">Drag me</div>
<div id="garbageCollector" style="width:100%; height:400px; background-color:#333; color:white;"> Drop items on me</div>
Erneutes ziehen, um die Klon/Kopie, setzen Sie das withDataAndEvents Argument wahr:
$(this).append($(ui.draggable).clone(*true*));
Da ich nicht in der Lage bin zu kommentieren (noch) ich das als eine separate Antwort hinterlassen werden - jemand bei, wie ich, wird diese Frage finden:
Für die Frage Kommentar
" Aber ich möchte, dass das geklonte/fallengelassene Element an derselben Position ist, an der es abgelegt wurde. ? Sie wissen, wie ich es tun kann“
Ich habe Lösung in verschiedenen SO Frage gefunden, und die Antwort ist diese Zeile zu ändern:
$(this).append($(ui.draggable).clone());
zu
$(this).append($(ui.helper).clone());
(Änderung ui.draggable ui.helper)
Hoffe, es hilft.
Scott, vielen dank für diese . Aber ich möchte das geklonte/dropped Element in der gleichen Position sein, die es fallen gelassen wurde. Weißt du wie ich es machen kann? Ich habe versucht, .css (ui.position) hinzuzufügen. aber es hat nicht funktioniert – mark
Mark, meine erste Schätzung wäre gewesen, die .css (ui.position) zu verwenden, aber wenn Sie das versucht haben ... Was Sie versuchen könnten, ist eine temporäre Kopie des ziehbaren Objekts zu erstellen auf Halt. Dies sollte die relative Position des Objekts enthalten. Fügen Sie das dem Container anstelle des Objekts selbst hinzu. Lass es mich wissen – Scott
Ausgezeichnet! Ordentlich und einfach. – NLV