jQuery拖放行为与部分透明图像

Question

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

下面的图像是从我的测试页面抓取屏幕。如果我通过红色的东西点击蓝色方块的左下方区域，我应该拖动方块而不是红色的东西。红色的东西是被拖动的东西，因为它在顶部，浏览器不关心透明度。我的问题是，如何在这种情况下使其表现符合预期，并将其拖动到正方形中？

编辑：图片添加

Answer 1

如果你正在为支持<帆布>浏览器开发，你可以尝试

1. 寻找与光标的坐标到最像
2. 将图像加载到<画布>使用drawImage（）
3. 获取透明度（alpha）值e坐标上的像素

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