Ui 可拖动叠加层

Question

我需要如果你把 dragable 放在顶部的容器上，后面的 droppable 容器不会有反应。 http://jsfiddle.net/rA4CB/161/

嗨，伙计们，我已经在一个项目上工作了一段时间，我现在才播下这个问题，它真的会扼杀整个项目。我无法更改此结构，所以我想知道你们是否知道 "magic trick" 可以解决此问题。

<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 个可删除函数而不是一个。 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 更改为 disabled-state。

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

如果你想让它与 z-index 一起使用，它有点复杂，但你可以使用的一种方法是 document.elementFromPoint()。它 returns 位于特定点的最顶部元素，因此在放置时您可以将可拖动对象放在后面，然后检查哪个可放置对象在放置点最高。像这样：

$(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 可拖动叠加层

Ui draggable overlay

jquery

jquery-ui

droppable

draggable