javascript - JQueryUI: drop within container, append and revert -
i got stuck jqueryui. specifically, have following html snipped:
<div class="from"> <div class"item">item 1</div> <div class"item">item 2</div> <div class"item">item 3</div> </div> <div class="to"></div>
now want make items draggable , droppable on "to" box via jqueryui library. therefore, use javascript snippet:
$('.item').draggable({ revert: true }); $('.to').droppable({ drop: function(event, ui) { ui.draggable.appendto(this); } });
while works far result concerned, animation handling 'revert' doesn't behave want to. problem dragging implemented setting "position: relative" , changing 'top' , 'left' css properties. item attached new container (which happens before revert animation), jumps new position because it's positioned relatively new container. revert animation starts @ new position.
is there way can have smooth revert animation after attaching item new container? perhaps going wrong way, please don't hesitate suggest different approach.
i have been trying recalculate css left , top properties based on new containers absolute position, of course works first dropped item, second 1 additionally have consider first item's position.
thanks.
Comments
Post a Comment