在 jQuery-ui droppable 中检测不可接受的拖放

Question

我正在使用jQuery-uidraggable、droppable。我的主要container 应该只接受plugin-containers，它们也是接受插件的droppables。下面是我的代码sn-p的代码：

$("#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. Hightlight 可以删除插件的插件容器
2. 如果插件被放在主容器中，则会显示错误消息

但可放置的 over 和 drop 方法仅在拖动的项目可接受时才会触发，并且不会因不可接受的拖动而触发（在本例中为 .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"
});

Answer 2

您可以让所有的可拖动元素都可以接受，然后在您的 over and drop 方法中过滤想要/不需要的 div 并显示错误消息。

drop: function( event, ui ) {
var dropped = ui.draggable.attr('class');
if (dropped == ".plugin") {
  // show alert
} else {

}

还有 'revert' 选项可用于将拖动的元素恢复到其原始位置。