The sortable calendar handler is not called if you drag too quickly
If you quickly drag an item from the source list to the destination list box, the calendar handler does not fire.
I tested in FF 10, Chrome 17 and IE 9 with the same result.
To test it, drag an item from the list on the left to the box on the right. You will see the checkbox was added to the item after it was removed. In addition, a log is printed to the console.
But if you drag back quickly, you won't see the checkbox or log. You may have to try a couple of times to see the problem.
It looks like there is a lag in the firing, spreading, or capturing process. Any idea what's going on here?
I tried it with tags div
and span
and also get the same result.
source to share
So I just checked your problem, and what happens when you move the li to the right ul, but you drop the li outside the right ul, and it goes back to the right, not the left, but since you didn't drop it on the right line of the ul, drop event is not fired.
Please note 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 parameter when creating sorts and keep using droppables, or keep connectWith and use the get 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>' );
});
});
source to share