只允許一個可拖動的投擲的時間，讓任何對去除

Question

這裏就是我在一分鐘對我的拖動和投擲的部分有：

$('.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'); ///////// 
    } 
}); 

此刻，我可以堆疊在多個拖拽元素一個droppble。我只想讓任何一個可拖動的拖放在一次。一旦拖動可移動，一個新的可以進入該區域。帶有///////的代碼行是我最近添加的代碼，目的是嘗試實現這一點。

編輯：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"); 
    } 
}); 

Answer 1

檢查，看是否「刪亮點」類存在你追加項目之前，移除它可放開申報的「走出去」的一部分。

類似的信息（僞）：

如果this.hasClass（ '下降高亮'）{

（代碼）

}

和滴！ 這.removeClass（ '刪亮點'）。

你已經有了第二件事，只需添加第一件。

if !$(this).hasClass("dropped-highlight"){ 
    $(this).addClass("dropped-highlight"); 
    $(this).droppable('option', 'accept', ui.draggable); 
}