Jquery Draggable effect lots after transferring divs

Jquery Draggable effect lots after transferring divs

Im new with Jquery UI Draggable. heres my problem, I have 2 Divs which items may be transfered between two divs. Why does the draggable effect lost when a div transferred to other div then returned? I cannot use helper clone. element must be draggable at all time.

Here is to replicate the issue on jsfiddle https://jsfiddle.net/w7vjuuqx/7/:

  1. drag and drop the blue box from red box to green box.
  2. drag and drop the blue box from green box to red box.
  3. repeat step 1. here the drag effect lost.
HTML:

  1. <div id="item_holder" style="width:100px;height:100px;background-color:red">
  2.    <div class="item" style="width:20px;height:20px;background-color:blue">
  3.        test
  4.    </div>
  5. </div>
  6. <div id="placeholder" style="width:100px;height:100px;background-color:green;border-style: solid;display: inline-block;position:relative">

  7. </div>
JS:

  1. $('.item').draggable();

  2. $( '#placeholder' ).droppable({
  3.     accept: '.item',
  4.     drop: function( event, ui ) {
  5.       var droppable = $(this);
  6.       var draggable = ui.draggable;
  7.       $(draggable).attr('class', 'new_item_inside');
  8.       draggable.appendTo(droppable);
  9.       draggable.css({position: 'absolute', top: '0px', left: '0px'});
  10.       alert('hello');
  11.     }
  12. });

  13. $( '#item_holder' ).droppable({
  14.   accept: '.new_item_inside',
  15.   drop: function( event, ui ) {
  16.     var droppable = $(this);
  17.     var draggable = ui.draggable;
  18.     // var html = $(ui.draggable).clone(true);
  19.      ui.draggable.draggable('enable');
  20.     $(draggable).attr('class', 'item');
  21.     draggable.appendTo('#item_holder');
  22.     draggable.css({position: 'static', float: 'left'});

  23.   }
  24. });


Thanks in advance: