Calling $ (item) .sortable ('cancel') on the Drop event droppable disables sorting

Question

I have a sortable list of connections that are not available at the same time. The problem is that when I call the sortable method on the dropable dropable event, the sortable is interrupted and no longer works. Example http://jsfiddle.net/zSnBA/10/ try moving the div number 102 to the second list: will you see that the cancel event will be raised, but the sorting will not work anymore? Any help?

Answer 1

I would recommend you not to drag the sorted list, but listen to the receive event for sorting to cancel the event:

 $('div.products-list').sortable({ connectWith: '.products-list', placeholder: 'ui-state-highlight', items: 'div.product', revert: 200, receive: function(event, ui) { var prod_id = ui.item.attr("prod_id"); /* Equal to 1 is valid because an item was just added to the list: */ if ($(this).find(".product[prod_id='" + prod_id + "']").length > 1) { ui.sender.sortable("cancel"); } } }); 

Example: http://jsfiddle.net/z5X5y/