使用jQuery拖放时保留元素的副本

我正在使用Jquery拖放，我想保留我拖动的元素的副本。

$('.draggable').draggable({ revert: "invalid", stack: ".draggable" //helper: 'clone' }); $('.droppable').droppable({ accept: ".draggable", drop: function( event, ui ) { var droppable = $(this); var draggable = ui.draggable; // Move draggable into droppable draggable.appendTo(droppable); draggable.css({top: '5px', left: '5px'}); } }); 

的jsfiddle

因此，如果我将红色方块拖到灰色框中，红色方块的副本会保留在同一个位置，我可以拖动任意多个。

谢谢。

Answer 1

你可以clone()然后追加元素

 $('.draggable').draggable({ revert: "invalid", stack: ".draggable", helper: 'clone' }); $('.droppable').droppable({ accept: ".draggable", drop: function (event, ui) { var droppable = $(this); var draggable = ui.draggable; // Move draggable into droppable draggable.clone().appendTo(droppable); //draggable.css({top: '5px', left: '5px'}); } }); 

 $('.draggable').draggable({ revert: "invalid", stack: ".draggable", helper: 'clone' }); $('.droppable').droppable({ accept: ".draggable", drop: function(event, ui) { var droppable = $(this); var draggable = ui.draggable; // Move draggable into droppable draggable.clone().appendTo(droppable); draggable.css({float:'left'}); } }); 

 .draggable { width: 50px; height: 50px; background: red; } .droppable { width: 150px; height: 150px; background: lightgrey; } 

Answer 2

你设置revert: true, revertDuration: 0,保持位置。

 $('.draggable').draggable({ revert: true, revertDuration: 0, stack: ".draggable" //helper: 'clone' }); $('.droppable').droppable({ accept: ".draggable", drop: function( event, ui ) { var droppable = $(this); var draggable = ui.draggable; var clone = draggable.clone(); // Move draggable into droppable $(this).append(clone); clone.css({top: '5px', left: '5px'}); } });