I have the following code:
Droppable area
$( "#droppable1" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
$( "#droppable1" ).on( "dropout", function( event, ui ) {
$( "#droppable1" )
.removeClass("ui-state-highlight").find( "p" )
.html( "Drop Here" );
});
Dragable item
$( "#draggable1" ).draggable({
snap: ".ui-widget-header",
snapMode: "inner",
axis: "y",
containment: "#containment-wrapper",
scroll: false
});
All works fine BUT I cannot understand or work out how I prevent a droppable
space from accepting multiple drops if an item has already been dropped
into it.
- How would I modify the code to prevent
#droppable1
from accepting more than onedrop
? - Is it possible to use the
.return
option so that if one tried to drop an additional item, it would merely revert back to its original position?
EDIT:
$(".drop-zone").droppable({
drop: function(event, ui) {
$(this).droppable('option', 'accept', ui.draggable);
},
out: function(event, ui){
$(this).droppable('option', 'accept', '.drag-item');
}
});
});
The above is from the thread listed below but I am struggling to implement with my code.
New code
$( "#droppable1" ).droppable({
drop: function( event, ui ) {
$(this).droppable('option', 'accept', ui.draggable);
},
out: function(event, ui){
$(this).droppable('option', 'accept', '.drag-item');
}
});
OK, so I now have the code working above BUT this is actually, I don't think, what I need. Is there any way to STOP a draggable item actually being dropped and/ or snapped on a populated droppable space?
Thanks as always,
H.