0

我有以下代码：

可放置区域

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

一切正常，但我无法理解或弄清楚droppable如果一个项目已经dropped进入它，我如何防止一个空间接受多次下降。

  1. 我将如何修改代码以防止#droppable1接受多个drop？
  2. 是否可以使用该.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。

4

0 回答 0