Question

我不确定这是否可行。

我正在制作一个上传页面，用户可以上传图片并通过拖动/调整大小（jquery）来操作它以适应预定义的模板。

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

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

请点击此处查看我目前所拥有的示例：http://inspirasie.com/uploadtest.html

这是我的代码：

SCRIPT

<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：

当设置为“none”时，此CSS属性允许元素不接收悬停/点击事件，而事件将发生在其后面的任何内容上。

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

1 个答案: