Skip to content

How to place items in specified position in drop in javascript

Maksym Labutin
wtp
wtp

I have five images in my code, I want to drop these such that it is dropped in the desired position(circular position) in the dropped area.

ie,

when the five images are dropped it should form a circle shape rather than a straight line

How to achieve this?

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">

Advertisement

Answer

Use nth-child() to #div1 img and set position to each image with top/left

also use position:absolute to img and position:relative; to #div

    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;
      position:relative;     
}
#div1 img{
    position: absolute;
}
#div1 img:nth-child(1) {
    left: 155px;
}
#div1 img:nth-child(2) {
    top: 35px;
    left:215px;
}
#div1 img:nth-child(3) {
    top: 95px;
    left: 185px;

}
#div1 img:nth-child(4) {
    top: 95px;
    left: 120px;
}
#div1 img:nth-child(5) {
    top: 35px;
    left:95px;
}
<p>how to position the dropped images in a circular postion 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">