[英]Only allow one draggable in a droppable a time, allow any on remove
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. 目前,我可以将多个可拖动对象堆叠在单个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. 在追加项目之前,请检查是否存在“ dropped-highlight”类,然后将其删除到droppable声明的“ out”部分。
Something like (pseudocode): 类似于(伪代码):
if !this.hasClass('dropped-highlight'){ 如果!this.hasClass('drop-highlight'){
(your code) (您的代码)
} }
and in drop: this.removeClass('dropped-highlight'). 放下: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);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.