Ändern Sie das gezogene Objekt, wenn ziehbare beginnt

Question

Ich versuche, etwas wie ein UI-Designer zu erstellen. Also habe ich eine "Toolbox" und eine "Leinwand". Wenn ich die Toolbox-Elemente als ziehbar markieren, kann ich sie ziehen. Aber ich muss eine Kopie ziehen, damit ich mehrere Instanzen eines Werkzeugelements auf die Arbeitsfläche ziehen kann.

$('.tool-box-item').draggable({ 
    helper : 'clone', 
    drag : function (event, ui){ 
     // jQuery does not allow object modification here 
    }, 
}); 

Dies funktioniert nicht wie das Klonen nur angewandt wird, beim Ziehen und sobald der Widerstand abgeschlossen ist, wird das ursprüngliche Element bewegt. Ich habe versucht, die Drag-Eigenschaft zu überschreiben, aber ich kann das gezogene Element nicht ändern. Gleiches war der Fall beim Start.

Hinweis: Ich kann das Stop-Ereignis nicht verwenden, da ich die Kopie erstellen möchte, wenn der Ziehvorgang beginnt und nicht danach. Ich war auch in der Lage, eine Kopie zu erstellen, indem ich den Canvas als Droppable definiere und eine Kopie dort mache. Aber dann möchte ich eine Kopie erstellen, wenn der Ziehvorgang beginnt.

Ich denke, ich muss eine benutzerdefinierte Drag-Funktion erstellen, aber hoffte, wenn jQuery einen anderen alternativen Weg hat.

Hier ist ein jsfiddle, aber ich möchte das Element am Anfang und nicht nach dem Ziehen klonen.

EDIT: Das Ziel ist ein Drittanbieter-Steuerelement. Es hat eine eigene Implementierung für das Drop-Event (Stacking und Alignment). Falls ich es am Ende kloniere, muss ich ihre Implementierung modifizieren.

Answer 1

zu halten "dragend" Ereignis, versucht ursprüngliches Element zu verwenden für das Ziehen und klonen Sie es für einen Platz in Ihrer "Toolbox".

var graggableConfig = { 
    helper:"clone", 
    stop: function(event, ui){ 
    var clon = $(this).clone(); 
    clon.attr("style","") 
    .appendTo(".src") 
    .draggable(graggableConfig); 
    $(this).detach() 
    .attr("style","") 
    .appendTo(".dst") 
    .draggable("destroy"); 
    } 
}; 
$(".item").draggable(graggableConfig); 

codepen here

Answer 2

Sie können die Methode clone (https://api.jquery.com/clone/) von jquery verwenden, um das ziehbare Element nach dem Löschen zu klonen. Würde so etwas Ihren Bedürfnissen entsprechen?

$(function() { 
    makeDraggable($("#draggable")); 
}); 

function makeDraggable(element) { 
    $(element).attr('style', 'position:absolute').draggable({ 
     start: function() { 
      makeDraggable($('#draggable').clone().attr('style', '').appendTo('body')); 
     } 
    }); 
} 

Es ist ein wenig rau, aber hier ist die jsbin: https://jsbin.com/tasodixoka/edit?html,output

Edit: Ich habe Ihre Geige aktualisiert: https://jsfiddle.net/z9rrL6po/6/