具有较高 z-index 的元素后面的 jQuery 可拖动选择目标答案

【问题标题】：jQuery draggable select target behind an element with higher z-index具有较高 z-index 的元素后面的 jQuery 可拖动选择目标
【发布时间】：2011-11-09 11:35:18
【问题描述】：

我正在使用可拖动的 jQuery UI。我有一堆带有 z-indexes 的元素和一个完全位于可拖动容器上方的元素。我无法将它设置为可拖动，因为点击事件无法通过它，因为它位于另一个元素后面。

如何访问该元素并让它响应鼠标事件？

我的 CSS：

#top {
    width:500px;
    height:500px;
    z-index:5;
    background-color:rgba(255,0,0,0.5);
    position:absolute;
}
#child {
    width:300px;
    height:300px;
    z-index:4;
    background-color:rgba(0,255,0,0.5);
    position:absolute;
    top:50px;
    left:50px;
}
#draggable {
     width:200px;
    height:200px;  
    z-index:4;
    background-color:rgba(0,0,255,0.5);
    position:absolute;
    top:10px;
    left:10px;
}

我的 HTML：

<div id="top"></div>
<div id="child">
    <div id="draggable"></div>
</div>

还有我的 Javascript：

$(function(){

    $("#draggable").draggable({
        containment: "child"
    });

});

我也把所有这些代码放到了 JS Fiddle 中演示：http://jsfiddle.net/wvSqk/

谢谢

【问题讨论】：

让我们弄清楚：为什么你首先希望巨大的 div 超过其余部分？
在第一个父 div 中包含第二个 parant div 使它可以工作，但我不知道它是否真的是你想要的：jsfiddle.net/wvSqk/2
@Hans Wassink 不幸的是，这是设计/布局要求，并且此 div 必须位于顶部。对此我无能为力，只能与它合作。
@Guillaume Cisco 否，这会更改 z 顺序，以便可拖动对象位于父项的顶部而不是后面
好吧，我不认为这是可能的然后交配...也许你可以制作一个脚本来检查你点击的像素，然后是你的 div 下面的元素。知道可以暂时隐藏顶部什么的。元素永远不会在您的浏览器中点击，抱歉...

标签： jquery css jquery-ui draggable z-index

【解决方案1】：

只需在没有事件转发或任何复杂的情况下解决此问题 - 只需将另一个透明放在所有内容之上，并将其标记为可拖动。并且每当它被拖动时，将其位置复制到下面的目标层。
像这样的：

var $draggableOverlay = $("#draggableOverlay");
var $draggableTarget = $('#draggableTarget');

$draggableOverlay.draggable({
    drag: function() {
        $draggableTarget.css('left', $draggableOverlay.css('left'));
        $draggableTarget.css('top', $draggableOverlay.css('top'));
    }
});

您可以进行更多调整以使其看起来不错，并关闭一些边缘情况，但它确实有效。

【讨论】：

【解决方案2】：

已经有人问过类似的问题：css 'pointer-events' property alternative for IE。

现在我知道它并不完全相同，但它确实处理从一个元素传递到另一个元素的鼠标事件。查看那里的链接，看看它是否可以帮助您解决您的情况。

【讨论】：

【解决方案3】：

另一种可能的解决方案是将可拖动元素应用于最顶部的元素，并将实际应该被拖动的元素作为“助手”返回。请注意，您实际上不应该传递要拖动的元素本身——因为它在拖动完成时会被删除——而是它的副本；类似：

$( "#top" ).draggable({
  cursor: "move",
  cursorAt: { top: -12, left: -20 },
  helper: function( event ) {
     return $( "#draggable").clone();
  }
});

这当然只是一个开始（例如，应该隐藏原始元素，并且需要计算“cursorAt”），但如果您需要进一步的指导，我很乐意为您提供帮助。

【讨论】：

【解决方案4】：

您必须将#top div z-index 设置为低于#child z-index

#top {
    ...
    z-index:3;
}

如果无法更改CSS，可以在鼠标悬停#top div时使用jquery进行更改。

类似的东西

 var oldValue=  $("#top").css('z-index');
 var newValue = $("#child").css('z-index')-1;

 $("#top").hover(function(){$("#top").css('z-index',newValue)},
                   function(){$("#top").css('z-index',oldValue)});

这是一个小车，但你必须调整。 http://jsfiddle.net/wvSqk/4/

【讨论】：