在jQuery-ui droppable中檢測不可接受的拖放

Question

我正在使用jQuery-ui draggable和droppable 。 我的主container應該只接受plugin-containers ，這也是接受插件的可放置對象。 以下是我的代碼段中的代碼：

$("#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. 如果將插件放置在主容器中，則顯示錯誤消息

但是droppable over和drop方法僅在被拖動的項目可接受時才觸發，而對於不可接受的拖動（在本例中為.plugin）不會觸發。 我在這里可以做什么？

這是小提琴

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和drop方法中過濾所需/不需要的div並顯示錯誤消息。

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

}

還有一個“ 還原 ”選項，可用於將拖動的元素還原回其原始位置。