"Out" event in a sortable is never triggered

Question

I have a sortable (made of nested <div></div>) on my webpage. I would like that an item dragged out of the sortable be removed from the sortable. But I can't get the "out" event to be triggered.

Here is my JS (inspired from this SO question):

    $(function(){
        var removeIntent = false;
        $('#selectedTags').sortable({
            over: function () {
                removeIntent = false;
                console.log("over: "+removeIntent);
            },
            out: function () {
                removeIntent = true;
                console.log("over: "+removeIntent);
            },
            beforeStop: function (event, ui) {
                console.log("over: "+removeIntent);
                if(removeIntent){
                    ui.item.remove();   
                }
            }
        });
    });

You will find my jsFiddle here.

All help is welcome.

Edit: If I convert my divs to a <ul></ul> it then works as planned. Any explanations there ? I would like to keep the <div></div> though as I need the sortable to be horizontal.

Answer 1

Just checked your fiddle; it seems that the css

#selectedTags > div {float: left;
}

is what is actually causing the out not to be triggered. Just a pointer!

Answer 2

Easy fix : just use an horizontal list format instead of focusing on the <div></div> stuff.

I still don't know why the out event won't work for divs though.

SO way to do that here

    #menu ul{
      list-style: none;
    }

    #menu li{
      display: inline;
    }