CODEWITHSUNDEEP
jquery
Hellodan
Hellodan

Reputation: 1208

How do you drag an image under higher element using Jquery?

I need help with being able to drag an image thats underneath an overlying png mask which has areas that allow the image beneath to show through. I want to be able to move the image beneath the mask around but keep the mask stationary. is this possible to accomplish, if so how?

Upvotes: 2

Views: 426

Answers (2)

Joseph Marikle
Joseph Marikle

Reputation: 78550

Depending on how cross-browser it needs to be, but you can use pointer-events:none;

http://jsfiddle.net/dvjfv/

.overlay {
    pointer-events:none;
}

Upvotes: 3

maxedison
maxedison

Reputation: 17573

The PNG mask will always intercept the click event if it is layered on top of the image underneath. There is simply no way around that. However, you can certainly detect a mousedown event on the mask and use that to cause the window's mousemove event to adjust the position of the underlying image. You would then use a mouseup event to end the drag (i.e. the window's mousemove event would no longer affect the position of the image).

Upvotes: 0

Related Questions