jQuery .sortable + receive Event: get the position of the inserted element

Question

I've got a jQuery sortable element and another draggable element. With the sortable receive event i get the new inserted object and start an ajax query to write it in database. But it would be nice to get the right position of the new element, too. When i fire sortable("serialize") on receive event, the new element is not in the string. how can i find out the position of the inserted element?

Answer 1

Draggable:

<div id="docP1" class="docPopC">';
    for($x = 10; $x<30; $x++){
        if($block_ele[$x])
            echo '<p id="b_'.$x.'" class="doc_inhalt_popup">'.$block_ele[$x].'</p>';
    }
echo '
</div>

Sortable:

<div id="aktiv"><input type="hidden" value="xx" /></div>

jQuery:

$("#aktiv").sortable({
connectWith: '#aktiv',
forcePlaceholderSize: true,
items: 'div.block',
receive: function(event, ui){
    var nblock = ui.item.attr("id").split("_");

    $.get('inc_dokumente.php', {
        index : 'n256',
        aktiv : $("#aktiv input:first").val(),
        id : rel,
        block: nblock[1]
    }, function(data){ 
        load_bloecke();
    });
},
update: function(event, ui){ 
    $.get('inc_dokumente.php', {
        index : 'n257',
        aktiv : $("#aktiv input:first").val(),
        id : rel,
        sort: $("#aktiv").sortable("serialize")
    }, function(data){
        if(data) alert(data);
        load_bloecke();
    });
}
});

$(".docPopC p").draggable({
    connectToSortable: '#aktiv',
    helper: 'clone',
    revert: 'invalid',
    zIndex: 9999999,
    appendTo: 'body'
});

Answer 2

The problem is this option when declaring #aktiv as sortable

items: 'div.block'

With this you are saying that only divs with class block should be concidered sortable inside #aktiv, so when you do $("#aktiv").sortable("serialize"), jQuery doesn't evaluate the item you dropped into it, since it is a p element. If this is the case, then your newly dropped items will also not be sortable with the other elements (the div.blocks), so you are fixing several problems)

Possible solutions:

• Make #aktiv consider the p element a sortable (items: 'div.block, p.doc_inhalt_popup)
• Make the p elements you drag into divs with class block
• (You can skip giving the draggable class block in your HTML and instead add it with jQuery when you receive the item)