一次只能允許一個可拖動對象拖放，允許任何一個都可以刪除

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

目前，我可以將多個可拖動對象堆疊在單個droppable中。 我只希望一次將任何一個可拖放對象拖放到一個可拖動對象中。 刪除可拖動對象后，新的對象即可進入該區域。 我最近添加的帶有///////的代碼行就是為了實現這一目標。

編輯：這有效！

$('.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

在追加項目之前，請檢查是否存在“ dropped-highlight”類，然后將其刪除到droppable聲明的“ out”部分。

類似於（偽代碼）：

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

（您的代碼）

}

放下：this.removeClass（'dropped-highlight'）。

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

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