Question

I want to make jquery UI elements to disappear when dragged outside of a container.

For example Say I have one list of

<div class="myfavoritecontainer">
   <ul class="sortable">
   <li>item1</li>
   <li>item2</li
  </ul> 
</div>

and the sortable is turned into a jquery ui sortable… Now, when I drag these items out of the sort list I want to make them disappear… Whats the best way to accomplish?

A little clarification of what I’m trying to do:
Reference this jsfiddle: http://jsfiddle.net/nveid/kQmWt/4/

Basically items from the right list I’m adding to the list on the left(that parts done!), secondly items on the left part of the list when I drag outside of the left list I want to make them disappear. If you look at your js console while you drag the left side content you will see closely what I’m trying to accomplish.. But i’m just not accomplishing it because mouseenter is being triggered right after mouse left is triggered. The exact reason the event triggering is happening I don’t know but the fiddle should give some clarification.

Preferably I could make it so as soon as you mouse up from dragging the items on the left side outside of its div container they would disappear, but I’d setting for after they revert back to their original location the li item will disappear but the mouseenter/mouseleave events aren’t working right for me.

Answer 1

I looks like you need to use the beforeStop to remove items and maintain a sentinel based on the over and out to determine whether or not you’ve moved outside the bounds of the container. I’m basing this off the previous post here: Jquery Sortable, delete current Item by drag out

The jsFiddle edits would look like this in the sortable dedinition:

        over: function(e, ui) { sortableIn = 1; },
        out: function(e, ui) { sortableIn = 0; },
        beforeStop: function (event, ui) {
            newItem = ui.item;
            if (sortableIn == 0) { 
              ui.item.remove(); 
           }
        },