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中堆叠多个draggable。我只希望一次允许任何一个可拖放的拖放。删除拖动后，新的可以进入该区域。带有///////的代码行是我最近为了尝试实现这一点而添加的代码。

编辑：这有效！

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

在附加项目之前检查“drop-highlight”类是否存在，并在droppable声明的“out”部分删除它。

像（伪代码）：

if！this.hasClass（'dropped-highlight'）{

（您的代码）

}

并在下降： this.removeClass（ '下降高亮'）。

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

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

只允许一次在droppable中拖放一个，允许任何删除

1 个答案: