jQuery拖放行爲與部分透明圖像

Question

我想開發一個基於jQuery UI可拖動行爲的拖放行爲，但我正在運行到一些路障。我希望能夠在屏幕的某個區域周圍拖動幾張帶有透明區域的圖像。我希望用戶能夠拖動他點擊的圖像，而不是任何可拖動div或PNG恰好在z-indexed頂部。

下面的圖像是從我的測試頁面抓取屏幕。如果我通過紅色的東西點擊藍色方塊的左下方區域，我應該拖動方塊而不是紅色的東西。紅色的東西是被拖動的東西，因爲它在頂部，瀏覽器不關心透明度。我的問題是，如何在這種情況下使其表現符合預期，並將其拖動到正方形中？

編輯：圖片添加

Answer 1

如果你正在爲支持<帆布>瀏覽器開發，你可以嘗試

1. 尋找與光標的座標到最像
2. 將圖像加載到<畫布>使用drawImage（）
3. 獲取透明度（alpha）值e座標上的像素

重複每個圖像，直到找到一個在用戶單擊位置不透明的位置。