Keep a copy of the item when using jQuery drag and drop

Question

I am using jquery drag and drop and I want to keep a copy of the element that I am dragging.

$('.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

So, if I drag the red square into the gray window, the copy of the red square will remain in the same place, and I can drag as much as I want.

Thanks.

Answer 1

You can clone() and then add an element

 $('.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; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <div class="droppable"></div> <div class="draggable"></div> 

Update:

 $('.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 var drag = $('.droppable').has(ui.draggable).length ? draggable : draggable.clone().draggable({ revert: "invalid", stack: ".draggable", helper: 'clone' }); drag.appendTo(droppable); draggable.css({ float: 'left' }); } }); 

 .draggable { width: 50px; height: 50px; background: red; } .droppable { width: 150px; height: 150px; background: lightgrey; margin: 5px; display:inline-block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <div class="droppable"></div><div class="droppable"></div><div class="droppable"></div><div class="droppable"></div> <div class="draggable"></div> 

Answer 2

You set revert: true, revertDuration: 0, to stay in position.

 $('.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'}); } });