JQuery UI Droppable Accept crashes only from certain classes

Question

I have 3 div elements with an abs class, and only one of them has an additional class outside , as you see below. All elements are dragged and dropped (using jquery ui).

The problem is that I don’t want the div with the outside class to be deleted to other abs divs or to accept any abs divs that need to be removed into it. I only want to remove abs in another abs without outside existing in any of them. I tried the following, but I can still drag the div outside to other abs . I do not need this. Can you help me in the right direction to prevent this.

Check jsfiddle at http://jsfiddle.net/PWh2L/

 <div class="abs"></div> <div class="abs outside"></div> <div class="abs"></div> $('.abs').draggable(); $('.abs:not(.outside)').droppable({ accept: '.abs', hoverClass: "drop-hover", tolerance: "pointer", greedy: true }) 

Answer 1

It seems to me that you just need to drop '.abs:not(.outside)' into the accept parameter like this:

Working example

 $('.abs').draggable(); $('.abs:not(.outside)').droppable({ accept: '.abs:not(.outside)', // Important bit hoverClass: "drop-hover", tolerance: "pointer", greedy: true, drop: function () { alert('drop'); } }); 

Or maybe this is more than what you need:

Working example 2

 $('.abs').draggable(); $('.abs').droppable({ // Change here accept: '.abs:not(.outside)', // and here hoverClass: "drop-hover", tolerance: "pointer", greedy: true, drop: function () { alert('drop'); } });