I have an image with transparent areas. I dev another green div.
How can I move the green div all around the image by respecting the transparent areas. So the green div can pass under the transparent areas but not the non transparent one ?
Js Fiddle can be found here: 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);
Thanks a lot.
<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;">
The z-index together with the position attribute is for stacking context and allows placing them above each other.
The pointer-events: none; on the img is required to click through and allow the movement of the green container.
The user-select: none; is just cosmetic.