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

Question

我正在制作一个应用程序，它使用一个可拖放的div 和几个可拖动的divs。如何使 droppable 不接受多个可拖动的div？我用 Google 搜索了，但没有找到任何解决方法。

---

我想到了一个解决方法。我如何检查这个可放置的 div 中是否有放置的元素？如果它很忙，则恢复这个试图被丢弃的可拖动对象

Answer 1

OK 找到了一个很好的解决方案，基本上在“drop”上，我将 droppable 设置为仅接受已拖入其中的项目。

当您“禁用”时，您需要重新初始化的“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 2

您可以在第一个drop 之后销毁.droppable() 小部件，如下所示：

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

You can try out a demo here.

Answer 3

简单的皮西。只需在鼠标悬停时启用所有 .drop-zone，然后检查当前悬停的 .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');
    }
  }
});

Answer 4

我花了很多时间来解决这个问题，最后它对我有用：

$( ".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');
    }
});

Answer 5

此解决方案解决了 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 6

这个怎么样：

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

这样accept函数只有在没有元素被删除时才返回true。

Answer 7

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

Answer 8

你也可以反过来做，当 droppable 具有特定的类或属性时恢复可拖动对象（基于此示例：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 9

我的解决方案类似于 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');
  }
});

一个相关的功能是，将一个项目拖动到已经具有可拖动对象的 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);
  },
});