HTML の別の画像オーバーレイの背後にある画像へのドラッグとサイズ変更を有効にしたいという珍しい状況があります。このように見えます。
背景の画像 (つまり、コーラの瓶) は、jQuery UI を使用してサイズ変更およびドラッグ可能になります。ただし、問題は、オーバーレイされた画像の境界内をクリックするときに画像をドラッグしようとすることにあります。オーバーレイされた画像がドラッグ可能な要素の上にあり、単なる透明であるため、これは明らかに失敗します。
これは、使用されている html と javascript です。
$(".Overlay").draggable({ containment: "#divPhone", scroll: false }).resizable();
<div id="divPhone" style="position: relative;">
<div style="display: inline-block;" class="Overlay"><img src="ImageSource.png" style="width: 100%;height: 100%;" /></div>
<div style="position: absolute; left: 85px; top: 0px;"><img src="ImageSource.png" style="width: 240px;" /></div>
</div>
誰かがこの問題の回避策を提案できますか? 私が考えることができる唯一の解決策は、クリックイベントが発生したときに画像のインデックスを切り替えることですが、より良い解決策があるはずです.