jquery sortable/draggable double event firing

Question

I have some drag & drop code which works fine as it is. Just have a little query. I've noticed that if I add an alert within the drop function for debugging purposes (eg. alert(draggedItem.text());) it fires the alert twice when I drop something into the draggable area. I've read in another post that using droppable & sortable together causes this weird double event to happen. But I need to use the droppable event to get the dragged item object (ui.draggable) - this is so I can manipulate it when I drop it. If there is any other way of getting the draggable object, please tell me :) Also if you have an explanation to why this happens, that would be interesting...

$(".field > li").draggable({
    helper:'clone',
    opacity: 0.4,
    connectToSortable:'.dragrow'
});

$(".dragrow").droppable({
    drop: function(e, ui) {
        draggedItem = ui.draggable;
        //alert(draggedItem.text());
    }
}).sortable({ //code here to do stuff with 'draggedItem'

I also have another query related to this, but as my code is quite large, I'm unable to post the full thing here. So I understand if you are unable to help - just if something springs to mind that would be really cool. Basically I have a list of 'blocks' which I can drag into multiple rows. Individual rows can be hidden with the toggle event. If I have 3 rows, I can drag blocks into any of them. If I then hide the first one, I am now unable to drag into the other two rows. I can still sort them though. And once I start sorting them, I am then able to drag into them again. Weird...

Answer 1

Check the DEMO http://jsfiddle.net/yeyene/FUyTe/1/

As you mentioned, yes, using droppable & sortable together causes this weird double event to happen. But, if you still want to use draggedItem object, you still can use this with sortable receive option.

And also, you can use ui.item to get the current dragged element.

Try to comment on and off each alert and see, now it fires only once.

$(".field > li").draggable({
    helper:'clone',
    opacity: 0.4,
    connectToSortable:'.dragrow'
});

$(".dragrow").droppable({
    drop: function(e, ui) {
        draggedItem = ui.draggable;
    }
}).sortable({ 
    receive: function(e, ui) {
        // here is the draggedItem object of "droppable"
        alert(draggedItem.text());

        // here is the draggedItem object of "sortable"
        draggedItem2 = ui.item;
        //alert(draggedItem2.text());
    }
});

Here is one way to modify dropped element's html.

DEMO http://jsfiddle.net/yeyene/7fEQs/8/