Question

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

enter image description here

使用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>

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

enter image description here

Answer 1

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

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

正如其他人在类似问题的答案中提到的那样，您可以forward the events through layers使用document.elementFromPoint方法。使用简单的显示/隐藏技术，您可以简单地隐藏遮罩层，检查下面的点是什么，并重新显示遮罩层。这种情况发生得太快，浏览器不会使掩码消失。但是，由于你想要拖动和调整大小，当你移动鼠标等等时会发生很多事件，所以你可能会注意到这种技术变得非常迟钝。

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/

基本上我在包装器中添加了第3个元素。一个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);
        }
    });
});

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

3 个答案: