jQuery UI - Droppable只接受一个draggable

Question

我正在制作一个应用程序,即使用一个droppable div和一些draggable divs.如何使dropable不接受多个draggable div？我用谷歌搜索,但没有找到任何解决方法.

---

脑海中浮现出一种解决方法.我如何检查这个可丢弃的div中是否有丢弃的元素？如果它正忙,则恢复这个可拖动的,这是试图被丢弃

Answer 1

OK为此找到了一个很好的解决方案,主要是'drop'我将droppable设置为只接受已拖入其中的项目.

当您"禁用"时,您需要重新初始化的"输出"事件不再可用,因此我只是切换了符合条件的项目.

然后我可以使用OUT事件重新接受所有可拖动的项目,因为没有其他任何接受,OUT将不会被其他可拖动项触发:

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

Answer 2

您可以.droppable()在第一个之后销毁小部件drop,如下所示:

$(".droppable").droppable({
    drop: function( event, ui ) {
        $(this).droppable("destroy");
    }
});

您可以在这里试用一个演示.

Answer 3

我花了很多时间来弄清楚它，最后它对我来说是这样的：

$( ".drop-zone" ).droppable({
    classes: {
        "ui-droppable-active": "ui-state-active",
        "ui-droppable-hover": "ui-state-hover"
    },
    accept: function( draggable ){
        if (!$(this).hasClass('dropped') || draggable.hasClass('dropped')){
            return true;
        }
        return false;
    },
    drop: function( event, ui ) {
        $(this).addClass('dropped');
        ui.draggable.addClass('dropped');
    },
    out: function( event, ui ){
        $(this).removeClass('dropped');
        ui.draggable.removeClass('dropped');
    }
});