How can I move/drag an element that is behind a transparent DIV?

StackOverflow https://stackoverflow.com/questions/23560100

  •  18-07-2023
  •  | 
  •  

Question

Im not sure if this is possible.

I am making an upload page where users can upload a picture and manipulate it via drag / resize (jquery) to fit a pre defined template.

I have a DIV with a transparent .png background, which contains the img element. I want to be able to drag and resize the img element, but want the image to appear BEHIND the transparent DIV.

I have tried using z-index, and rearranging the parent / child relationships etc, but whenever my draggable element is set behind the DIV, I cannot drag it or resize it (because its behind the div)

see here for an example of what I have so far: http://inspirasie.com/uploadtest.html

here is my code:

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

At the moment, the DIV containing the img, has opacity settings, so I can see whether it is within the border of the #imageplacearea div,

What I want is the image to be full opacity, but BEHIND the #imageplacearea div, and still remain draggable / resizable.

Can this be done? or can anyone suggest an alternative way to achieve what I need to achieve?

Thanks.

Was it helpful?

Solution

If all your target browsers support it, you can apply the CSS property pointer-events: none to the transparent overlay. It's supported by all the latest major browsers.

From caniuse.com:

This CSS property, when set to "none" allows elements to not receive hover/click events, instead the event will occur on anything behind it.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top