Currently, this is my setup for draggable and droppable sections:
$('.planets').draggable({
opacity: .4,
create: function(){$(this).data('position',$(this).position())},
cursorAt:{left:15},
cursor:'move',
start:function(){$(this).stop(true,true)},
revert : 'invalid'
});
$('.targets').droppable({
greedy: true, ///////////////
drop: function( event, ui ) {
$( this ).addClass( "dropped-highlight" );
$(this).droppable('option', 'accept', ui.draggable); ////////
$(this).append(ui.draggable); /////////
snapToMiddle(ui.draggable,$(this)); //This function snaps the draggable to the middle of the droppable
},
out: function( event, ui ) {
$(this).removeClass( "dropped-highlight" );
$(this).droppable('option', 'accept', '.planets'); /////////
}
});
I have managed to restrict stacking multiple draggables in a single droppable. I aim to allow only one droppable in a draggable at a time. After removing a draggable, a new one can enter that area. The lines marked with /////// were recently added to achieve this.
Edit: This solution is effective!
$('.planets').draggable({
opacity: .4,
create: function(){$(this).data('position',$(this).position())},
cursorAt:{left:15},
cursor:'move',
start:function(){$(this).stop(true,true)},
revert : 'invalid'
});
$('.targets').droppable({
drop: function( event, ui ) {
if(!$(this).hasClass('dropped-highlight')){
$( this ).addClass( "dropped-highlight" );
$(this).droppable('option', 'accept', ui.draggable);
}
},
out: function( event, ui ) {
$(this).droppable('option', 'accept', '.planets');
$(this).removeClass( "dropped-highlight" );
}
});