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

Question

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

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

我的 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/

谢谢

Answer 1

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

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

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

您可以应用更多调整来使其看起来更漂亮，并关闭一些边缘情况，但它确实有效。

Answer 2

已经提出了与此类似的问题： css 'pointer -IE 的事件属性替代。

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

:)

Answer 3

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

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

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

Answer 4

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

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

如果您无法更改 CSS，则可以在以下情况下使用 jquery 进行更改：鼠标位于#top div 上。

类似这样的事情

 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/