如何移动/拖动透明 DIV 后面的元素？

Question

我不确定这是否可能。

我正在制作一个上传页面，用户可以在其中上传图片并通过拖动/调整大小 (jquery) 对其进行操作以适应预定义的模板。

我有一个带有透明 .png 背景的 DIV，其中包含 img 元素。 我希望能够拖动 img 元素并调整其大小，但希望图像出现在透明 DIV 的后面。

我尝试过使用 z-index，并重新排列父/子关系等，但是每当我的可拖动元素设置在 DIV 后面时，我就无法拖动它或调整它的大小（因为它在 div 后面）

请参阅此处了解我目前所拥有的示例：http://inspirasie.com/uploadtest.html

---

这是我的代码：

---

脚本

<script>
  $(function() {
    $("#draggable").draggable({ containment: "#uploadarea"});
    $( "#imagetester" ).resizable({ aspectRatio: true });
  });
  </script>

---

HTML

<div class="wrapper">

  <div id="uploadarea">

   <div id="imageplacearea">

    <div id="draggable">

     <img id="imagetester" src="images/testpic.jpg"> 

    </div>

   </div>

  </div>

</div>

---

CSS

#draggable {
    display: inline-block;
    background-image: url(../../images/85percent.png);
    background-repeat: repeat;
    opacity:0.7;
    filter:alpha(opacity=70);
}

#imageplacearea {
    background-image: url(../../images/template.png);
    height: 600px;
    width: 500px;
    background-repeat: no-repeat;
    background-position: center center;
}

---

目前，包含img的DIV有不透明度设置，所以我可以看到它是否在#imageplacearea div的边界内，

我想要的是完全不透明的图像，但在#imageplacearea div 后面，并且仍然保持可拖动/可调整大小。

这可以吗？或者任何人都可以提出一种替代方法来实现我需要实现的目标吗？

谢谢。

Answer 1

如果您的所有目标浏览器都支持它，您可以将 CSS 属性 pointer-events: none 应用于透明覆盖。我是supported by all the latest major browsers。

来自 caniuse.com：

这个 CSS 属性，当设置为“none”时，允许元素不接收悬停/点击事件，相反，该事件将发生在它后面的任何东西上。