jQuery drag and drop behavior with partially transparent image

Question

I'm trying to develop a drag-and-drop behavior based on the jQuery UI draggable behavior but am running into some road blocks. I want to be able to drag several images with transparent regions around a region of the screen. I want the user to be able to drag the image he clicks and not just whatever draggable div or PNG happens to be z-indexed on top.

The below image is a screen grab from my test page. If I click the lower left region of the blue square through the red thing I should drag the square and not the red thing. The red thing is what gets dragged though because it is on top and the browser does not care about the transparency. My question is, how can I make it behave as expected in this situation and drag the square instead?

Edit: Seems I can't attach images as a new user. See this URL for my example image: http://i42.tinypic.com/r1g4sk.png

Answer 1

If you're developing for browsers that support <canvas>, you can try

1. Find the coordinates of the cursor relative to the topmost image
2. Load the image into a <canvas> using drawImage()
3. Get the transparency (alpha) value for the pixel at the coordinates

Repeat for each image until you find one that isn't transparent at the point where the user clicked.