jQuery UI - Droppable只接受一个可拖动的

Question

我在制作一个应用程序，即使用一个可插入的div和几个可拖动的div s。我该如何让Droppoble不能接受多个可拖动的div？我谷歌搜索，但没有找到任何解决方法。

---

一个解决方法出现在脑海里。我该如何检查是否存在这个droppable div中的元素？如果是忙然后恢复这个拖动，这是试图将被丢弃

Answer 1

您可以第一drop后导致.droppable()小部件，像这样：

$(".droppable").droppable({ 
    drop: function(event, ui) { 
     $(this).droppable("destroy"); 
    } 
}); 

You can try out a demo here。

Answer 2

要启用它，使用选项：$(".selector").droppable({ disabled: **false** });

Answer 3

OK找到了这个很好的解决方案，从根本上“滴”我设置可放开只接受已被拖进它的项目。

当你'禁用'时，你需要重新初始化的'out'事件不再可用，所以我只是切换了符合条件的项目。

然后它可能对我来说，使用OUT时重新接受所有可拖动项目，并因为没有其他接受OUT不会被其他拖拽元素被触发：

$(".drop-zone").droppable({ 
    drop: function(event, ui) { 
     $(this).droppable('option', 'accept', ui.draggable); 
    }, 
    out: function(event, ui){ 
     $(this).droppable('option', 'accept', '.drag-item'); 
     } 
    }); 
}); 

Answer 4

如何：

$(".drop-zone").droppable({ 
    accept: function(draggable) { 
     return $(this).find("*").length == 0; 
    }); 
}); 

这样，只有当没有元素被丢弃时，accept funcion才返回true。

Answer 5

你也可以用相反的方法做到这一点，当可拖拽具有特定的类或属性时（通过构建该示例：https://stackoverflow.com/a/3418306/1005334），还原可拖拽。

因此，例如，使用rel属性（你也可以使用class或别的东西），用于可投放：

$('.drop-zone').droppable({ 
    drop: function() { 
     drop.attr('rel', 'filled'); 
    } 
}); 

而且可拖动：

$('.draggable').draggable({ 
    revert: function (droppable) { 

     if (droppable.attr('rel') == 'filled') { 
      return true; 
     } 
    } 
}); 

Answer 6

易Peasey。刚刚启用所有.drop区，当鼠标悬停它们，然后检查目前徘徊.drop区包含一个可拖动的元素

$('.drop-zone').droppable({ 
    over: function(event, ui) { 

    // Enable all the .droppable elements 
    $('.droppable').droppable('enable'); 

    // If the droppable element we're hovered over already contains a .draggable element, 
    // don't allow another one to be dropped on it 
    if($(this).has('.draggable').length) { 
     $(this).droppable('disable'); 
    } 
    } 
}); 

Answer 7

该解决方案解决了一个重大的错误在Likwid_T的答案的。

$('.draggable').draggable({ 
    start: function(ev, ui) { 
    $('.ui-droppable').each(function(i, el) { 
     if (!$(el).find('.ui-draggable').length) $(el).droppable('enable'); 
    }); 
    } 
}); 

$('.droppable').droppable({ 
    drop: function(ev, ui) { 
    $(ev['target']).droppable('disable'); 
    } 
}); 

Answer 8

我的解决方案类似于Likwid_T的，除非它使用可放开drop事件以及维护拖拽元素和droppables，而不是可弃的out事件之间的联系。我认为使用out的问题在于，即使拖动了已经“完整”的可拖拽然后“拖曳”它时，它也会被触发。

droppable({ 
    drop: function(event, ui) { 
    var $droppable = $(this); 
    var $draggable = ui.draggable; 

    // If the draggable is moved from another droppable, unlink it from the old droppable 
    var oldDropped = $draggable.data('dropped'); 
    if(oldDropped) { 
     $draggable.data('dropped', null); 
     oldDropped.data('dragged', null); 
    } 

    // Link the draggable and droppable 
    $draggable.data('dropped', $droppable); 
    $droppable.data('dragged', $draggable); 
    }, 
    accept: function() { 
    // Only accept if there is no draggable already associated 
    return !$(this).data('dragged'); 
    } 
}); 

一个相关的特征是，一个拖一个项目上已经有一个可拖动可投放，老人们会被替换，并恢复到初始位置。这就是我要做的事：

droppable({ 
    drop: function(event, ui) { 
    var $droppable = $(this); 
    var $draggable = ui.draggable; 

    // Reset position of any old draggable here 
    var oldDragged = $droppable.data('dragged'); 
    if(oldDragged) { 
     // In the CSS I have transitions on top and left for .ui-draggable, so that it moves smoothly 
     oldDragged.css({top: 0, left: 0}); 
     oldDragged.data('dropped', null); 
    } 

    // If the draggable is moved from another droppable, unlink it from the old droppable 
    var oldDropped = $draggable.data('dropped'); 
    if(oldDropped) { 
     $draggable.data('dropped', null); 
     oldDropped.data('dragged', null); 
    } 

    // Link the draggable and droppable 
    $draggable.data('dropped', $droppable); 
    $droppable.data('dragged', $draggable); 
    }, 
}); 

Answer 9

我花很多时间来弄明白，最后工作对我来说是这样的：

$(".drop-zone").droppable({ 
    classes: { 
     "ui-droppable-active": "ui-state-active", 
     "ui-droppable-hover": "ui-state-hover" 
    }, 
    accept: function(draggable){ 
     if (!$(this).hasClass('dropped') || draggable.hasClass('dropped')){ 
      return true; 
     } 
     return false; 
    }, 
    drop: function(event, ui) { 
     $(this).addClass('dropped'); 
     ui.draggable.addClass('dropped'); 
    }, 
    out: function(event, ui){ 
     $(this).removeClass('dropped'); 
     ui.draggable.removeClass('dropped'); 
    } 
});