javascript - 在jQuery-ui droppable中检测 Not Acceptable 拖放

我正在使用jQuery-ui draggable，droppable。我的主要container应该只接受plugin-containers，这也是接受插件的droppables。以下是我的代码段中的代码：

$("#main").droppable({
                activeClass: "ui-state-default",
                hoverClass: "ui-state-hover",
                accept: ".plugin-container",
                drop: function( event, ui ) {
                    $( this ).find( ".placeholder" ).remove();
                    $("<div></div>").html(ui.draggable.html()).appendTo(this).droppable({ accept: '.plugin', drop: function (event, ui) { $('<div></div>').html(ui.draggable.html()).appendTo(this); } }).sortable();
                }

});

问题是当将插件拖到主容器中时，我要：


可以删除插件的Hightlight插件容器
如果将插件放置在主容器中，则显示错误消息


但是droppable over和drop方法仅在被拖动的项目可接受时才触发，而对于不可接受的拖动（在本例中为.plugin）不会触发。我在这里可以做什么？

这是fiddle

最佳答案

我想我已经找到了您问题的精确解决方案！

看看这个FIDDLE

码：

$("#main").droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",

    //accept: ".plugin-container",
    drop: function( event, ui ) {

        if(ui.draggable.hasClass('plugin'))
        {
            alert('This element cannot be dropped here !');
            $(ui.draggable).draggable({ revert: true });
        }
        else if(ui.draggable.hasClass('plugin-container'))
        {
            //console.log('context = ');
            //console.log(ui.draggable.context);

            $( this ).find( ".placeholder" ).remove();
            $("<div></div>").addClass('plugin-container')
            .html(ui.draggable.html())
            .appendTo(this)
            .droppable({
                accept: '.plugin',
                greedy:true,//this will prevent the parent droppables from receiving the droppable object
                drop: function (event, ui) {
                    $(ui.draggable).draggable({ revert: false });
                    $('<div></div>')
                    .addClass('plugin')
                    .html(ui.draggable.html())
                    .appendTo(this);
                }
            }).sortable();
        }
    }

});

$(".menu div").draggable({
     appendTo: "body",
     helper: "clone"
});

关于javascript - 在jQuery-ui droppable中检测 Not Acceptable 拖放，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24427299/