1

我有一个不寻常的情况，我想启用拖动和调整大小到位于 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>

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

在此处输入图像描述

4

3 回答 3

4

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

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

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

于 2013-10-24T01:12:13.737 回答
1

嗯，如果我理解正确的话；我认为可以使用稍微不同的 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确保用户可以到达图像的边缘来调整它的大小。

于 2013-10-23T14:50:09.760 回答
1

这是一个更 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);
        }
    });
});
于 2013-10-24T02:22:38.603 回答