具有部分透明图像的jQuery拖放行为

Question

我正在尝试基于jQuery UI可拖动行为开发拖放行为，但我遇到了一些路障。我希望能够在屏幕区域周围拖动带有透明区域的多个图像。我希望用户能够拖动他点击的图像，而不仅仅是可拖动的div或PNG恰好是z-indexed顶部。

下图是我的测试页面的屏幕抓取。如果我通过红色的东西点击蓝色方块的左下方区域，我应该拖动方块而不是红色的东西。红色的东西是被拖拽的东西，因为它在顶部，浏览器不关心透明度。我的问题是，如何让它在这种情况下按预期运行并拖动方块？

修改：添加的图像为

Answer 1

如果您正在开发支持＆lt; canvas＆gt;的浏览器，您可以尝试

1. 找到光标相对于最顶层图像的坐标
2. 将图像加载到＆lt; canvas＆gt;使用drawImage（）
3. 获取坐标
处像素的透明度（alpha）值

对每个图像重复此操作，直到在用户单击的位置找到一个不透明的图像。