Drop() gets called twice with Sortable/Droppable

Question

I have this code right here. I have two problems though:

In the receive function, how can we get the element that just got dropped into the sortable? Not the one that was used to drop a new one, but the actual one that got dropped into the list?

Since I couldn't find that, I decided to use the drop() function, but now, why is that function getting called twice?! I don't want that!

$( "#sortable" ).droppable({

    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    drop: function( event, ui ) {
        $(ui.draggable).editable(function(value, settings) { 
             return(value);
             },{
             tooltip     : "Click to edit"
          });
    }
}).sortable({

    revert: true,
    receive: function(event, ui) {
        $(this).children("li").each(function(index) {
            $(this).attr("id", "content-" + index);
            });
    }

});

The actual one that got dropped into the list? Did you try `ui.helper`? — Frédéric Hamidi, Jun 06 '12 at 12:56
It is "null" and if I change ui.item, it is the original one, not the newly one dropped. :S If I do ui.item.text('test');, it doesn't change the one in the new list. It changes the "original" one. — abisson, Jun 06 '12 at 13:00
Frédéric Hamidi, I think you're on too something there. Consider formulating an answer out of that so we can give credit where its due. LOL — Shanimal, Jun 06 '12 at 13:27
@MarkSchultheiss no. This replaces the entire sortable. I just want the new

score 0 · Accepted Answer · answered Jun 06 '12 at 19:51

I was curious, so I did a bit of playing around with this.

I did not see the 'receive' event fire at all in my testing with a droppable in play. Given that, I looked at your code, and it seems you want to set the id on the newly dropped. So, I did put together this: http://jsfiddle.net/ER5Jd/ - use that to see it in action adding the ID and listing the last list items id.
Sort and it shows the new last one in the list after the sort. My hope is that it helps you. Note: ui.helper in the "drop" is the helper item that is dragging around the screen (draggable clone set) but the actual clone is from the draggable.

my markup:

<ul id='firstOne'>First
    <li class='listItem'>oneF</li>
    <li class='listItem'>twoF</li>
</ul>
<ul id='secondOne'>Second<span></span>
    <li class='listItem'>oneS</li>
    <li class='listItem'>twoS</li>
</ul>

my code:

$('#firstOne .listItem').draggable({
    helper: 'clone'
});
giveId($('#secondOne'));// initial ids set

$("#secondOne").droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    drop: function(event, ui) {
        $(ui.draggable).clone().css('background-color', 'pink')
          .attr('id', 'content-' + ($(this).find('.listItem').length + 1))
          .appendTo(this).siblings().css('background-color', 'yellow');
        showId($(event.target));
    },
    accept: '#firstOne .listItem'
}).sortable({
    revert: true,
    update: function(event, ui) {
        showId($(event.target));
    },
    receive: function(event, ui) {
        alert('receipt');
    }
});

function giveId(list) {
    list.find(".listItem").each(function(index) {
        $(this).attr("id", "content-" + index);
    });
    showId(list)
}
// show the last items id
function showId(list) {
    list.find('span').text(list.find('.listItem:last').attr('id'));
}

Drop() gets called twice with Sortable/Droppable

1 Answers1

Linked