使用 jQuery UI 启用在叠加层下方拖动元素

Question

我有一个不寻常的情况，我想启用拖动和调整大小到位于 html 中另一个图像叠加层后面的图像。看起来像这样。

使用 jQuery UI 使背景中的图像（即：可乐瓶）可调整大小和可拖动。然而，问题在于在覆盖图像的范围内单击时试图拖动图像。这显然失败了，因为覆盖的图像位于可拖动元素的顶部并且只是一个透明度。

这是正在使用的 html 和 javascript。

$(".Overlay").draggable({ containment: "#divPhone", scroll: false }).resizable();

<div id="divPhone" style="position: relative;">
    <div style="display: inline-block;" class="Overlay"><img src="ImageSource.png" style="width: 100%;height: 100%;" /></div>
    <div style="position: absolute; left: 85px; top: 0px;"><img src="ImageSource.png" style="width: 240px;" /></div>
</div>

任何人都可以为这个问题提出任何解决方法吗？我能想到的唯一解决方案是在点击事件发生时切换图像的索引，但假设必须有更好的解决方案。

Answer 1

正如我在 cmets 中提到的，您可以将 CSS 发送到 pointer-events:none;。

这可能不适用于 IE（所有版本），除非您使用的是 SVG 元素。他们似乎投票删除了pointer-events，因为你可能会劫持其他人的链接。

正如其他人在类似问题的答案中提到的，您可以使用document.elementFromPoint 方法的forward the events through layers。使用简单的显示/隐藏技术，您可以简单地隐藏遮罩层，检查下方点的内容并重新显示遮罩层。这种情况发生得如此之快，以至于浏览器不会使遮罩消失。但是，由于您想要拖动和调整大小，当您移动鼠标等时会触发很多事件，因此您可能会注意到使用这种技术会变得相当滞后。

Answer 2

嗯，如果我理解正确的话；我认为可以使用稍微不同的 HTML 标记并更改溢出来实现。这将缓解分层元素的问题。

<div id="phone">
    <!--
    The phone screen, the "white bit" of the phone; the position and dimensions
    of this will need to be changed.
    -->
    <div id="phone_screen" style="overflow: hidden">
        <img id="phone_img" />
    </div>
</div>

• #phone 充当容器，本质上是包裹手机 屏幕和图像
• #phone_screen 用作被移动和调整大小的图像的容器
• #phone_img 设置为可拖动和调整大小的主图像。

使用这种结构，图像应该是可拖动和调整大小的。向#phone_screen 添加一些填充可能是值得的，以确保用户可以到达图像的边缘来调整它的大小。

Answer 3

这是一个更 javascript 风格的方法来完成你想要做的事情：

http://jsfiddle.net/nL5ew/

基本上我在包装器中添加了第三个元素。一个 div，它将充当将被拖动和调整大小的图像的不可见句柄。然后使用 jquery ui 中的事件进行拖动和调整大小，我确保图像模仿句柄正在执行的操作。 Resize 为alsoResise 提供了一个方便的选项，使这变得更容易。

使用这种方法，“处理程序”现在位于顶部，因此可以单击背景图像的任何位置。

HTML：

<div id='workbox'>
    <img src="http://tryimg.com/4/01.png" id="drag-resize-me" />
    <img src="http://tryimg.com/4/phone.png"id="phone"/>
    <div id="handle"></div>
</div>

CSS：

#workbox{
    width: 401px;
    height: 511px;
    position: relative;
    border: 5px #000 solid;
    overflow: hidden;
}
#phone{
    position: absolute;
    top: 0;
    left: 0;
}
#drag-resize-me{
    position: absolute;
    top: 0;
    left: 0;
}
#handle{
    border: 1px #ccc solid;
}

JAVASCRIPT：

$(function(){
    $('#handle').css('height',$('#drag-resize-me').height()).css('width',$('#drag-resize-me').width());
    $("#handle").draggable({
        drag: function(event,ui)
        {
            $('#drag-resize-me').css('left',ui.position.left).css('top',ui.position.top);
        }
    });
    $("#handle").resizable({
        alsoResize:'#drag-resize-me',
        handles: 'all',
        resize: function(event,ui)
        {
            $('#drag-resize-me').css('left',ui.position.left).css('top',ui.position.top);
        }
    });
});