Question

我正在创建一个应用，即使用一个可放置的div和一些可拖动的div。如何使droppable不接受多个可拖动的div？我用谷歌搜索，但没有找到任何解决方法。

一种解决方法出现了。我如何检查这个可丢弃的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

Easy Peasey。只需在悬停在它们上面时启用所有.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

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

我花了很多时间来弄明白，最后它对我有用：

$( ".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 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或其他内容），对于droppable：

$('.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＆，但它使用可放置的drop事件以及维护draggables和droppables之间的链接而不是droppable的out事件。我认为使用out的问题在于，即使将拖动拖动到已经完整的＆＃34;上，它也会被触发。可放弃然后＆＃34; out＆＃34;它的。

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

jQuery UI - Droppable只接受一个draggable

9 个答案: