ui可拖动覆盖

Question

如果您将可拖动的容器放在顶部的容器上，我需要它不会反应。 http://jsfiddle.net/rA4CB/161/

大家好，我已经在一个项目上工作了一段时间，而我刚刚提出了这个问题，它真的会扼杀整个项目。我无法改变它的结构，所以我想知道你们是否知道任何“魔术”来解决这个问题。

<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 个可放置函数而不是 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()。它返回特定点的最顶部元素，因此在放置时您可以将可拖动元素放在后面，然后检查放置点最高的可放置元素。像这样：

$(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