Question

我正在尝试构建一个jquery应用程序，其中我有一个固定的图像和第二个可拖动的图像。我需要固定图像在可移动图像的顶部显示z-index - 固定图像是一张带有阿尔法切出孔的图片，用于在游乐园中找到的脸部。问题是，只要可移动（面部）图像与固定图像重叠，点击和拖动事件就会被固定图像捕获，该图像位于顶部并且不会到达可移动图像。所以它不再可动了。这是我的代码......

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js"></script>

<div id="fixed" style="position:relative; z-index: 2">
    <img src="background.png">
</div>

<div id="face" style="position:relative; z-index: 1">
    <img src="face.png">
</div>

<script>
    $(function() {
        $("#face").draggable();
    });
</script>

如果面对象在固定背景后面，可以如何使其可拖动？我可以在下面的对象上手动触发鼠标事件吗？如果是这样，我如何调用它们以便jquery-ui draggable（）正常工作？我能以某种方式得到固定的图像，不是为了捕捉事件吗？或者我需要手工编写自己的可拖动机制？

Answer 1

我想我找到了一个非常简单的解决方案。基本上，只有在满足某些条件时才能传递事件（例如#face在#fixed下）。 Check out this fiddle for example

快速查看偶数数据显示，可拖动只会绑定mousedown，因此这似乎是您需要转发的唯一事件。

$('#face').draggable();

$('#fixed').bind('mousedown', function(e){
    // TODO: IF #face is under #fixed AND mouse is over #face THEN
   $('#face').trigger(e); // trigger the event on face
});

Answer 2

我认为你可能最好为下面的元素创建某种“拖动句柄”，它总是可见的（至少在启用拖动时）。或者，单独的UI控件与图像分开，这些图像将充当可拖动图像的“操纵杆”，这样您就可以移动图像而无需手动拖放图像本身。

考虑一下：让我们说他们将项目拖到顶部项目下面然后放下它;他们怎么再次捡起来？如果这是你解释的设置（你可能在游乐园找到的脸部的切口孔），那么用户将无法看到下面的元素，因此，他们不可能使用鼠标与该元素进行交互。

将javascript事件发送到被掩盖的对象

2 个答案: