具有部分透明图像的 jQuery 拖放行为
我正在尝试开发基于 jQuery UI 可拖动行为的拖放行为，但遇到了一些障碍。我希望能够在屏幕区域周围拖动多个具有透明区域的图像。我希望用户能够拖动他点击的图像，而不仅仅是任何可拖动的 div 或 PNG 恰好位于顶部的 z 索引。
下图是我的测试页面的屏幕截图。如果我通过红色物体单击蓝色方块的左下区域，我应该拖动该方块而不是红色物体。红色的东西是被拖动的，因为它位于顶部并且浏览器不关心透明度。我的问题是，在这种情况下如何使其按预期运行并拖动方块？
编辑：已添加图片
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: Images added
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
如果您正在为支持
每个图像重复此操作，直到找到在用户单击的位置处不透明的图像。
If you're developing for browsers that support <canvas>, you can try
Repeat for each image until you find one that isn't transparent at the point where the user clicked.