CODEWITHSUNDEEP
javascriptjquerypositioningdisplay
robin
robin

Reputation: 17

How to make div draggable with other div on top of it

I have two div on top of eachother. One is to display a border and the other is to display an image. I'm using the jquery .draggable(); method to make the div underneath draggable. The problem is that I can not move the div underneath. If it is on display:none; the draggable method works fine. It's because there is a div on top of it.

HTML:

<div id="editor-holder">
   <div id="border-holder"><img src="img/border.png"></div>
   <div id="image-holder"><img src="background-image.jpg"></div>
</div>

CSS:

#editor-holder{
  width:400px;
  height:300px;
  position:relative;
  overflow:hidden;
}

#border-holder{
  position:absolute;
}
#border-holder img{
  width:100%;
}

#image-holder{
  position:absolute;
}
#image-holder img{
  width:100%;
}

Javascript:

$( function() {
   $( "#image-holder" ).draggable();
});

I want to be able to drag the background image around without having to hide the border. Is there any way to do this?

Upvotes: 1

Views: 1224

Answers (1)

mpetrov
mpetrov

Reputation: 391

Add pointer-events: none to the CSS for the border element. It will make it untargetable and all click/drag/touch events will pass through it .

Upvotes: 1

Related Questions