Question

我正在使用jQuery UI draggable。我有一些带有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-events' property alternative for IE。

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

：）

Answer 3

另一种可能的解决方案是将draggable应用于最顶层元素，并将实际应该拖动的元素作为“帮助器”返回。请注意，您不应该实际传递待拖动元素本身 - 因为它在拖动完成时被删除 - 但是它的副本;类似的东西：

$( "#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，则可以在鼠标移过#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/

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

4 个答案: