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/:
- drag and drop the blue box from red box to green box.
- drag and drop the blue box from green box to red box.
- repeat step 1. here the drag effect lost.
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>
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'});
- }
- });
Thanks in advance: