使用jQuery UI在覆盖下的元素中启用拖动

我有一个不寻常的情况，我想启用拖动和重新调整大小的图像后面的另一个html图像覆盖。看起来像这样

背景中的图像（即：可乐瓶）可以使用jqueryui调整大小和拖动。但是，问题在于在覆盖图像的边界内单击时尝试拖动图像。这显然是失败的，因为覆盖的图像位于可拖动元素的顶部，只是一个透明度

这是正在使用的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>

$（“.Overlay”）.draggable（{containment:“#divPhone”，scroll:false}）.resizeable（）；

有人能提出解决这个问题的办法吗？我能想到的唯一解决方案是在发生单击事件时切换图像的索引，但假设一定有更好的解决方案

---

嗯，如果我理解正确的话；我认为可以使用稍微不同的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_img

  设置为可拖动和可调整大小的主图像

---

使用这种结构，图像应该是可拖动和可重新调整大小的。在

#phone_屏幕上添加一些填充物可能是值得的，以确保用户可以到达图像的边缘来调整其大小。
Hmm，如果我理解正确的话；我认为可以使用稍微不同的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_img
设置为可拖动和可调整大小的主图像

使用这种结构，图像应该是可拖动和可重新调整大小的。可能值得在
#phone_屏幕上添加一些填充，以确保用户可以到达图像的边缘以调整其大小。
正如我在评论中提到的，您可以将CSS发送到
指针事件：无

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

正如其他人在对类似问题的回答中所提到的，您可以使用
document.element frompoint
方法。使用简单的显示/隐藏技术，您可以简单地隐藏遮罩层，检查下面的点，然后重新显示遮罩层。这种情况发生得如此之快，以至于浏览器不会使遮罩消失。但是，由于您想要拖动和调整大小，当您移动鼠标等时会触发很多事件，因此您可能会注意到使用这种技术会变得非常滞后。
正如我在评论中提到的，您可以将CSS发送到
指针事件：无

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

正如其他人在对类似问题的回答中所提到的，您可以使用
document.element frompoint
方法。使用简单的显示/隐藏技术，您可以简单地隐藏遮罩层，检查下面的点，然后重新显示遮罩层。这种情况发生得如此之快，以至于浏览器不会使遮罩消失。但是，由于您想要拖动和调整大小，当您移动鼠标等时会触发很多事件，因此您可能会注意到，使用这种技术会变得非常滞后。
下面是一种更具javascript风格的方法来完成您要做的事情：


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

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

HTML:

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);
        }
    });
});

下面是一种更具javascript风格的方法来完成您正在尝试的操作：


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

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

HTML:

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);
        }
    });
});

您可以设置
指针事件：无到CSS中的覆盖层。然而，你被IE困住了。哦，该死的，我在发布悬赏后才看到你的评论…：-0您应该将其作为答案发布，因为它似乎也适用于IE。@ahren来领取您的赏金吧！！！有一个问题与此密切相关：@ahren它基本上使用了你的解决方案，但有一个IE失败的后备方案。只需添加注释作为答案：PAlso，您可以设置
指针事件：无到CSS中的覆盖层。然而，你被IE困住了。哦，该死的，我在发布悬赏后才看到你的评论…：-0您应该将其作为答案发布，因为它似乎也适用于IE。@ahren