I have five images in my code and I would like to arrange them in a circular pattern when they are dropped into the designated area.
For example, instead of lining up the five images in a straight line, I want them to form a circle shape once dropped.
How can I achieve this effect?
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}#div1 {
width: 350px;
height: 150px;
padding: 10px;
border: 1px solid #aaaaaa;
}<p>how to position the dropped images in a circular position rather than in a straight line on drop:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="https://picsum.photos/200/300" draggable="true" ondragstart="drag(event)" width="50" height="50">
<img id="drag2" src="https://picsum.photos/200/300?image=0" draggable="true" ondragstart="drag(event)" width="50" height="50">
<img id="drag3" src="https://picsum.photos/200/300/?gravity=east" draggable="true" ondragstart="drag(event)" width="50" height="50">
<img id="drag4" src="https://picsum.photos/200/300/?blur" draggable="true" ondragstart="drag(event)" width="50" height="50">
<img id="drag5" src="https://picsum.photos/200/300/?random" draggable="true" ondragstart="drag(event)" width="50" height="50">