Keep a copy of an element when using jQuery drag and drop

Question

I'm using Jquery drag and drop and I want to keep a copy of the element I'm 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 to the grey box, a copy of the red square stays in the same place and I can drag as many as I want.

Thanks.

Answer 1

You can clone() and then append the 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>