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();
                }

});

问题是当插件被拖入主容器时，我想：

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

但是，如果拖动的项目是可接受的，则只能触发超过和放置方法，并且不会触发不可接受的拖动（在这种情况下为.plugin）。我能在这做什么？

以下是fiddle

Answer 1

我想我找到了解决您问题的确切方法 !!

查看此FIDDLE

CODE：

$("#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

你可以让所有的draggabbles都可以接受，然后在你的over和drop方法中过滤想要/不需要的div并显示错误信息。

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

}

您还可以使用“revert”选项将拖动的元素恢复到原始位置。

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

2 个答案: