jquery drag and drop

by holoverse

HTML

<script src="https://code.jquery.com/jquery-2.2.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div id="item_holder" style="width:100px;height:100px;background-color:red">
   <div class="item" style="width:20px;height:20px;background-color:blue">
       test
   </div>
</div>
<div id="placeholder" style="width:100px;height:100px;background-color:green;border-style: solid;display: inline-block;position:relative">

</div>

JavaScript

$('.item').draggable({
     revert: "invalid",
     helper: "clone",
     cursor : "move",
   });
$( '#placeholder' ).droppable({
    accept: '.item',
    drop: function( event, ui ) {
      var droppable = $(this);
      var draggable = ui.draggable;
      $(draggable).attr('class', 'new_item_inside');
      draggable.appendTo(droppable);

      draggable.css({position: 'absolute', top: '0px', left: '0px', });

    }
});

$( '#item_holder' ).droppable({
  accept: '.new_item_inside',
  drop: function( event, ui ) {
    var droppable = $(this);
    var draggable = ui.draggable;
    // var html = $(ui.draggable).clone(true);
     ui.draggable.draggable('enable');
    $(draggable).attr('class', 'item');

    draggable.appendTo(droppable);
    draggable.css({position: 'static', float: 'left'});
    $(this).draggable();
  }
});