Tengo una imagen con áreas transparentes. Desarrollé otro div verde.
¿Cómo puedo mover el div verde alrededor de la imagen respetando las áreas transparentes? Entonces, ¿el div verde puede pasar por debajo de las áreas transparentes pero no por las no transparentes?
Js Fiddle se puede encontrar aquí: 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);Muchas gracias.
<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;"> El z-index junto con el atributo de position es para apilar contexto y permite colocarlos uno encima del otro.
Los pointer-events: none; en la img se requiere hacer clic y permitir el movimiento del contenedor verde.
El user-select: none; es solo cosmético.