Javascript 一次仅允许一个可拖放，允许任何打开或移除

以下是我目前掌握的可拖动和可拖放部分：

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

目前，我可以在一个可拖放文件中堆叠多个可拖放文件。我只想允许任何一个拖放在一个可拖动的时间。一旦拖拽物被移除，新的拖拽物就可以进入该区域。带有////的代码行是我最近添加的代码行，目的是尝试实现这一点

编辑：这很有效

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

在附加项之前，请检查是否存在“drophighlight”类，并在droppable声明的“out”部分将其删除

类似于（伪代码）：

如果！this.hasClass（'drop-highlight'）{

（你的代码）

}

而在下降中： 这个.removeClass（'drop-highlight'）

您已经准备好了第二件事，只需添加第一件

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

---

如果它不匹配，我会在函数中添加什么来还原它？返回“无效”？它不会“做任何事情”。换言之，你不需要还原它，如果你删除它，你就什么也不会做，而且它已经有了经典。我已经用我尝试过的内容更新了我的问题，但它仍然可以让你将它放在那里。一旦我设法弄清楚要删除的内容的细微之处，效果非常好，哈哈。非常感谢你！我已经更新了我的原始答案，供其他人将来参考。