Question

JSFiddle Source

If you drag and drop an item from source list box to destination list box really quickly, then the drop handler does not fire.
I’ve tested in Firefox 10, Chrome 17 and IE 9 with the same result.

To test it out, drag an item from the list box on the left to the one on the right normally. You will see that a checkbox has been added to the item once dropped. Also, a log is output to the console.

But if you drag and drop really quickly, you won’t see the checkbox nor the log. You might need to try it a couple of times to see the issue.

So seems like there is a lag in the event firing, propagation or catching process. Any idea what’s happening here?

I’ve tried it with div and span tags as well, and get the same result.

Answer 1

So I just checked out your problem and what’s happening is that you’re moving the li over the right ul but you’re dropping the li outside of the right ul and it goes back to the right one instead of the left one, but since you didn’t drop it inside the right ul the drop event isn’t fired.

Check out the following (unanswered) question for a similar problem: https://stackoverflow.com/questions/7775769/sortable-and-droppable-issue-returning-to-original-sortable-list

You have two options to fix this: remove the connectWith option when creating the sortables and keep using droppables, or keep the connectWith and use the receive event from sortable:

$( function() {
    // make the two list boxes sortable        
    $( '#source, #destination' ).sortable({
        connectWith: $( 'ul' )
    });

    // when an item is dropped on destination list box (right one),
    // a checkbox is added to it
    $( '#destination' ).bind("sortreceive", function( e, ui ) {
        var label = $( ui.item[0] ).text();
        console.log( label + ' dropped to destination list box' );
        $( ui.item[0] ).remove();
        $( this ).append( '<li><label><input name="categories[]" type="checkbox" /> '+ label +'</label></li>');
    }); 

    // when an item is dropped on the source list box (left one),
    // the checkbox is remove
    $( '#source' ).bind("sortreceive", function( e, ui ) {
        var label = $( ui.item[0] ).text();
        $( ui.item ).remove();            
        $( this ).append( '<li>' + label + '</li>' );
    });
});​