Sortable and draggable behavior on list items

Question

I'm coming here because I'm having trouble doing something with jQuery UI's sortable/draggable/droppable.

I'm trying to do something like iTunes playlist (when you change the order of tracklist or move a track to another playlist) The idea is that I have a list of tracks (in a ) and I want this list to be sortable, and that's the easy part. Indeed I also have a second list (of playlist) and I want tracks to be draggable to those "playlist" items to do something.

Here's an exemple : http://jsfiddle.net/MSGhf/1/

(the sortable is working exactly as I want it, the black line is just a <div class="plholder"></div>)

But when you start dragging a track, sortable works fine. But when you move the track out of the draggable, the new order stays, and so dragging tracks on playlist potentialy change the track list order too, which is a problem.

So I don't know how to block the sortable when a track leaves it.

If you have any idea :)

Thanks !

Answer 1

Ah, ok, I see what's happening. Here's what you want to do (working example, here: http://jsfiddle.net/mori57/L3CF8/1/)

    $(".droppable").droppable({
        tolerance: "pointer",
        drop:function(){
            // You need to tell your sortable to cancel 
            // the last drag/drop interaction
            $("ul").sortable("cancel");
            alert("Do something on drop ...");   
        }
    });