Question

我需要在后面的droppable容器中，如果你将可拖动的东西放在顶部的容器上就不会有反应。 http://jsfiddle.net/rA4CB/161/

Hy先生我已经做了一段时间的项目了，我刚刚播下了这个问题，它真的杀了整个项目。我无法改变这种结构，所以我想知道你们可能知道解决这个问题的任何“魔术”。

<div id="draggable" class="ui-widget-content">
    <p>Drag me to my target</p>
</div>

<div class="droppable" class="ui-widget-header droppable">
    <p>Drop here</p>
</div>
<div class="droppable2" class="ui-widget-header droppable">
    <p>Drop here</p>
</div>
$(function() {


$("#draggable").draggable();
  $(".droppable,.droppable2").droppable({
    tolerance: 'pointer',
    drop: function(event, ui) {
      $(this)
        .addClass("ui-state-highlight")
        .find("p")
        .html("Dropped!");
    }
  });
});

额外信息： droppable和droppable2必须工作，即使z-index也会被更改。例如，droppable位于droppable2的顶部或相反。在这里你可以看到z-index问题，有2个droppable函数而不是1个。 Link

任何帮助都会很棒!!!提前谢谢。

Answer 1

您可以在顶部使用 over 和 out 事件来禁用背面的事件。像这样：

$(function() {
  $("#draggable").draggable();
  $(".droppable").droppable({
    tolerance: 'pointer',
    drop: function(event, ui) {
      $(this)
        .addClass("ui-state-highlight")
        .find("p")
        .html("Dropped!");
    }
  });
  $(".droppable2").droppable({
    tolerance: 'pointer',
    drop: function(event, ui) {
      $(this)
        .addClass("ui-state-highlight")
        .find("p")
        .html("Dropped!");
    },
    over: function(event, ui) {
      $(".droppable").droppable("disable")
    },
    out: function(event, ui) {
      $(".droppable").droppable("enable")
    }
  });
});

请注意，如果您不希望在禁用状态下获得视觉反馈，则需要将CSS更改为禁用状态。

http://jsfiddle.net/wppykb9a/2/

如果您希望它与 z-index 一起使用，它会更复杂，但您可以使用的一种方法是 document.elementFromPoint（）。它返回特定点的最顶层元素，因此在丢弃时您可以将拖动器放在后面，然后检查哪个droppable在丢弃点处最高。像这样：

$(function() {
  window.a = 10;

  $(".droppable,.droppable2").draggable();

  $("#draggable").draggable({
    tolerance: 'pointer'
  });
  $(".droppable").droppable({
    accept: "#draggable",
    drop: function(event, ui) {
        var temp = ui.draggable.zIndex();
        ui.draggable.css('z-index', -1000);
        var topDroppable = document.elementFromPoint(event.clientX, event.clientY);
      ui.draggable.css('z-index', temp);
      $(topDroppable)
        .addClass("ui-state-highlight")
        .find("p")
        .html("Dropped!");
    }
  });
});

http://jsfiddle.net/17xn0zvz/

请参阅https://developer.mozilla.org/en-US/docs/Web/API/Document/elementFromPoint

Ui draggable overlay

1 个答案: