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 abs
divs 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
})
JqueryUI - Droppable. jQueryUI provides droppable() method to make any DOM element droppable at a specified target (a target for draggable elements). Syntax. $ (selector, context).droppable (options) Method. The droppable (options) method declares that an HTML element can be used as an element in which you can drop other elements.
This option is used when you need to control which draggable elements are to be accepted for dropping. By default its value is *. Option - accept This option is used when you need to control which draggable elements are to be accepted for dropping. By default its value is *meaning that every item is accepted by droppable. This can be of type −
This option is Stringrepresenting one or more CSS classes to be added to the element of droppable when an accepted element (an element indicated in options.accept) moves into it. By default its value is false. Syntax $( ".selector" ).droppable( { hoverClass: "drop-hover" } );
This option is a string representing one or more css classes to be added to the droppable element when an accepted element (one of those indicated in options.accept) is being dragged. by default its value is false.
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');
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With