Here's what I've got at the minute for my 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'); /////////
}
});
At the moment, I can stack multiple draggables in a single droppable. I only want to allow ANY ONE droppable in a draggable at a time. Once a draggable has been removed, a new one can enter that area. The lines of code with /////// are the ones I most recently added in order to try and achieve this.
Edit: This works!
$('.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" );
}
});
Check to see if the "dropped-highlight" class is present before you append the item, and remove it on the "out" part of droppable declaration.
Something like (pseudocode):
if !this.hasClass('dropped-highlight'){
(your code)
}
and in drop: this.removeClass('dropped-highlight').
You already have the second thing in place, just add the first.
if !$(this).hasClass("dropped-highlight"){
$( this ).addClass( "dropped-highlight" );
$(this).droppable('option', 'accept', ui.draggable);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.