javascript - Jquery element lost draggable effect after transferring divs -

im new jquery ui draggable. heres problem, have 2 divs items may transfered between 2 divs. why draggable effect lost when div transferred other div returned? cannot use helper clone. element must draggable @ time.

here replicate issue on jsfiddle https://jsfiddle.net/w7vjuuqx/7/:

1. drag , drop blue box red box green box.
2. drag , drop blue box green box red box.
3. repeat step 1. here drag effect lost.

js:

$('.item').draggable();  $( '#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'});       alert('hello');     } });  $( '#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('#item_holder');     draggable.css({position: 'static', float: 'left'});    } }); 

html:

<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> 

if add below code on .item draggable, should see visually dragging action. however, you'll notice, original stays in place, , clone draggable. think user know this. won't confusing.

$('.item').draggable({  revert: "invalid",  helper: "clone",  cursor : "move", }); 

fiddle