CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-droppable
Hussein
Hussein

Reputation: 42808

jQuery UI Droppable Accept drops from only certain classes

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

The problem is I do not want the div with class outside to be dropped into other abs divs or to accept any absdivs to be dropped into it. I only want to be able to drop abs into other abs without outside existing in either. I tried the following but i'm still able to drag the outside div into other abs divs. I do not want that. Can you help guide me into the proper way to prevent this from happening.

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
})

Upvotes: 6

Views: 7148

Answers (1)

apaul
apaul

Reputation: 16170

I think you just need to drop '.abs:not(.outside)' in to the accept option like so:

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 perhaps this is more what you're after:

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');
    }
});

Upvotes: 6

Related Questions