我有一個透明區域的影像。我開發了另一個綠色 div。
如何通過尊重透明區域來移動影像周圍的綠色 div。所以綠色 div 可以通過透明區域而不是非透明區域？
Js Fiddle 可以在這里找到： https ://jsfiddle.net/Lcper5y1/
function handle_mousedown(e){
window.my_dragging = {};
my_dragging.pageX0 = e.pageX;
my_dragging.pageY0 = e.pageY;
my_dragging.elem = this;
my_dragging.offset0 = $(this).offset();
function handle_dragging(e){
var left = my_dragging.offset0.left (e.pageX - my_dragging.pageX0);
var top = my_dragging.offset0.top (e.pageY - my_dragging.pageY0);
$(my_dragging.elem)
.offset({top: top, left: left});
}
function handle_mouseup(e){
$('body')
.off('mousemove', handle_dragging)
.off('mouseup', handle_mouseup);
}
$('body')
.on('mouseup', handle_mouseup)
.on('mousemove', handle_dragging);
}
$('.box').mousedown(handle_mousedown);
非常感謝。
uj5u.com熱心網友回復：
<div class="box" style="height:100px;
width: 100px;
background: green;
position: absolute; /* or relative */
z-index: 1;">A</div>
<img src="https://i.ibb.co/L8hb78X/Final-Apple-i-Phone-13-Skin-Cutfile-Full-Wrap-Antenna-Display.png" width="300"
style="z-index: 2;
position: relative;
pointer-events: none;
user-select: none;">
與屬性z-index一起用于堆疊背景關系并允許將它們放在彼此之上。position
img 上的pointer-events: none;需要單擊并允許綠色容器移動。
這user-select: none;只是化妝品。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/496956.html
標籤：javascript html jQuery
上一篇：通過字串陣列過濾不包括第一個字符
下一篇：反應不渲染匯入的組件