代码之家 › 专栏 › 技术社区 › Deividas

Ui可拖动覆盖

droppable draggable jquery-ui jquery

Deividas · 技术社区 · 9 年前

我需要的是,如果你把可拖放的容器放在最上面的容器上,那么后面的可拖放容器不会发生反应。 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索引将更改。例如,droppable位于droppable2的顶部或对面。在这里,您可以看到z-index问题,它有两个可丢弃函数,而不是一个。 Link

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

1 回复 | 直到 9 年前

Julien Grégoire 9 年前

您可以使用结束和出来事件,以禁用背面的事件。大致如下:

$(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索引 ,这有点复杂,但您可以使用的一种方法是 document.elementFromPoint() 。它返回特定点处最顶部的元素,因此在drop中,您可以将dragable放在后面,然后检查哪个dragable在drop点处最高。这样地:

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