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

Question

我正在使用 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();
                }

});

问题是当一个插件被拖到主容器中时，我想:

1. 突出显示可以删除插件的插件容器
2. 如果插件被放置在主容器中显示错误信息

但可放置的 over 和 drop 方法仅在拖动的项目可接受时触发，不会在 Not Acceptable 拖动时触发(在本例中为 .plugin)。我可以在这里做什么？

这是 fiddle

Answer 1

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

看看这个 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"
});