jQuery UI – Droppable只接受一个draggable
我正在制作一个应用程序，即使用一个可放置的div和一些可拖动的div 。 如何让droppable不接受多个可拖动的div ？ 我用Google搜索，但没有找到任何解决方法。
脑海中浮现出一种解决方法。 我如何检查这个可丢弃的div中是否有丢弃的元素？ 如果它正忙，则恢复这个可拖动的，这是试图被丢弃
OK为此找到了一个很好的解决方案，主要是’drop’我将droppable设置为仅接受已拖入其中的项目。
当您“禁用”时，您需要重新初始化的“输出”事件不再可用，因此我只是切换了符合条件的项目。
然后我可以使用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'); } }); });
您可以在第一次drop后销毁.droppable()小部件，如下所示：
$(".droppable").droppable({ drop: function( event, ui ) { $(this).droppable("destroy"); } });
您可以在这里试用一个演示 。
易Peasey。 只需在hover在它们上面时启用所有.drop-zone，然后检查当前hover的.drop-zone是否包含可拖动元素
$('.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'); } } });
该解决方案解决了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'); } });
这个怎么样：
$(".drop-zone").droppable({ accept: function(draggable) { return $(this).find("*").length == 0; }); });
这样，只有当尚未删除任何元素时，accept函数才返回true。
我花了很多时间来搞清楚它，最后它对我有用：
$( ".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'); } });
要启用它，请使用以下选项： $(".selector").droppable({ disabled: **false** });
你也可以通过在droppable具有某个类或属性时恢复可拖动来反过来这样做（在此示例的基础上： https ： //stackoverflow.com/a/3418306/1005334 ）。
因此，例如，对于droppable，使用rel属性（您也可以使用class或其他东西）：
$('.drop-zone').droppable({ drop: function () { drop.attr('rel', 'filled'); } });
和拖延：
$('.draggable').draggable({ revert: function (droppable) { if (droppable.attr('rel') == 'filled') { return true; } } });
我的解决方案类似于Likwid_T，除了它使用droppable drop事件以及维护draggables和droppables之间的链接而不是droppable的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'); } });
一个相关的function是将一个项目拖动到已经具有可拖动的droppable上，旧的将被替换并恢复到其初始位置。 我是这样做的：
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); }, });