jQuery阻止可拖放接受多个项

jQuery阻止可拖放接受多个项,jquery,drag-and-drop,draggable,droppable,Jquery,Drag And Drop,Draggable,Droppable,我有以下代码: 可下降区域 $( "#droppable1" ).droppable({ drop: function( event, ui ) { $( this ) .addClass( "ui-state-highlight" ) .find( "p" ) .html( "Dropped!" ); } }); $( "#dropp

我有以下代码:

可下降区域

$( "#droppable1" ).droppable({
        drop: function( event, ui ) {
            $( this )
                .addClass( "ui-state-highlight" )
                .find( "p" )
                .html( "Dropped!" );
        }
    });

$( "#droppable1" ).on( "dropout", function( event, ui ) {
                 $( "#droppable1" )
                .removeClass("ui-state-highlight").find( "p" )
                .html( "Drop Here" );
   });
可拖动项目

$( "#draggable1" ).draggable({ 
     snap: ".ui-widget-header", 
     snapMode: "inner", 
     axis: "y", 
     containment: "#containment-wrapper", 
     scroll: false 
});
所有这些都可以正常工作,但我无法理解或解决如何防止
可拖放空间在项目已被
拖放
时接受多次拖放

  • 如何修改代码以防止
    #droppable1
    接受 多个
    拖放
  • 是否可以使用
    .return
    选项来 如果一个人试图放弃一个额外的项目,它只会恢复 回到原来的位置
  • 编辑:

    $(".drop-zone").droppable({
    drop: function(event, ui) { 
        $(this).droppable('option', 'accept', ui.draggable);
    },
    out: function(event, ui){
        $(this).droppable('option', 'accept', '.drag-item');
        }   
    });
    
    }))

    以上内容来自下面列出的线程,但我正在努力用代码实现

    新代码

    $( "#droppable1" ).droppable({
            drop: function( event, ui ) {
                $(this).droppable('option', 'accept', ui.draggable);
            },
            out: function(event, ui){
                $(this).droppable('option', 'accept', '.drag-item');
            }   
    
        });
    
    好的,我现在有了上面的代码,但实际上,我不认为这是我需要的。有没有办法阻止一个可拖动的项目在一个已填充的可拖放空间中实际被丢弃和/或抓拍

    谢谢你一如既往


    H.

    感谢您的链接,但我正在努力在我的代码中实现该代码!这似乎让我的jQuery呼吸困难。