How can I arrange ‘objy’ next to ‘objx’ and able to drag ‘objz’ to overlaying on ‘objy’ or ‘objx’? Thank you so much for any help/suggestions. How can I arrange ‘objy’ next to ‘objx’ and able to drag ‘objz’ to overlaying on ‘objy’ or ‘objx’? Thank you so much for any help/suggestions. How can I arrange ‘objy’ next to ‘objx’ and able to drag ‘objz’ to overlaying on ‘objy’ or ‘objx’? Thank you so much for any help/suggestions.
<html>
<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>
<script>
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();
}
</script>
</body>