How to tell when a jQuery UI sortable element is moved and in an invalid state.

Question

I have two connect sortable lists. I want to fire an event when an item is moved away from it's current list but NOT into the other connected list or when the item is being sorted. Anyone know how to do that?

What I'm going for here is to have the user remove an item by dragging it away from the list.

Answer 1

You can watch the $(".selector").sortable({out: function(e, ui) {}); to set a variable whenever an object is dragged outside a list. If it is released then .sortable({stop: function(e, ui) {}); is triggered. You can tell if the object wasn't dropped on a list if .sortable({over: function(e, ui) {}); wasn't called after an out trigger.

Answer 2

Building on Ian Wetherbee's answer, you could also make the sortables droppable and use doppable's out and over events to track when the element is entering and exiting the area. Building on the jQuery demo, you could add functionality like this:

var isInside = true;

$("#sortable1, #sortable2").sortable({
    connectWith: '.connectedSortable',
    stop: function() { alert(isInside) }
})
.droppable({
    over: function() { isInside = true; },
    out: function() { isInside = false; },
    accept: "li"
});

Here's a demo: http://jsfiddle.net/wy2AY/