Append `Draggable` after `Droppable`

Question

I have a simple html layout:

<div class="row">
    <div class="element">First Box</div>
    <div class="element">Second Box</div>
    <div class="element">Third Box</div>   
</div>

<div style="display:none">
    <div class="drop">Drop Here</div>
</div>

My aim was to make the elements Draggable to make it possible to change their order. I started with adding to each element a Drop element, in this case the .drop :

$('.element').each(function(){
    $(this).after($('.drop').first().clone());
});

Then i made the elements draggable and the drop dropable:

$('.element').draggable({
    stack: '.element',
    cursor: 'move',
    revert: true
});

$('.drop').droppable( {
    accept: '.element',
    hoverClass: 'hovered',
    drop: handleCardDrop
});

It basically works but my problem appears in the drop handler:

function handleCardDrop( event, ui ){
    $(this).after(ui.draggable);
    ui.draggable.draggable( 'option', 'revert', false );
};

I want to have the dragged .element added after the droppable element so that i can still add there another element. Furthermore the .element is not added directly after the .drop element its appended somwhere in the document: See it yourself: http://jsfiddle.net/R8kw6/3/

Thanks for your help!

Answer 1

It appears that your .element s are position relative. Since I don't see any css for that I'm assuming it's jquery that's making this adjustment. Position relative is not getting reset after you drop the item. Manually turning it off in a debug console resolves your problem.

That's what's causing the problem. Consider resetting this attribute on drop.