¿Cómo puedo organizar 'objy' junto a 'objx' y poder arrastrar 'objz' para superponerlo en 'objy' u 'objx'? Muchas gracias por cualquier ayuda/sugerencia. ¿Cómo puedo organizar 'objy' junto a 'objx' y poder arrastrar 'objz' para superponerlo en 'objy' u 'objx'? Muchas gracias por cualquier ayuda/sugerencia. ¿Cómo puedo organizar 'objy' junto a 'objx' y poder arrastrar 'objz' para superponerlo en 'objy' u 'objx'? Muchas gracias por cualquier ayuda/sugerencia.
let obj_x = document.getElementById("objx") let obj_y = document.getElementById("objy") let obj_z = document.getElementById("objz") var x = obj_x.getContext('2d'); var y = obj_x.getContext('2d'); var z = obj_x.getContext('2d'); if (obj_x.getContext && obj_y.getContext) { obj_x.width = 200; obj_x.height = 200; x.moveTo(0, 0); x.lineTo(0, 200); x.lineTo(200, 200); x.lineTo(200, 0); x.lineTo(0, 0); x.lineWidth = 1; x.strokeStyle = "black"; x.stroke(); obj_y.width = 200; obj_y.height = 200; y.moveTo(200, 0); y.lineTo(200, 200); y.lineTo(400, 200); y.lineTo(400, 0); y.lineTo(200, 0); y.lineWidth = 1; y.strokeStyle = "red"; y.stroke(); } else { document.write("Canvas Unsupported"); } function dragImg(e) { e.dataTransfer.setData('imgId', e.target.id); } function dropZone(e) { e.preventDefault(); } function dropImg(e) { var mId = e.dataTransfer.getData('imgId'); e.target.appendChild(document.getElementById(mId)); e.preventDefault(); } <body> <canvas id="objx" ondragover="dropZone(event)" ondrop="dropImg(event)"></canvas> <canvas id="objy" ondragover="dropZone(event)" ondrop="dropImg(event)"></canvas> <img id="objz" src="object.png" draggable="true" ondragstart="dragImg(event)"> </img> </body>