javascript - 如何在javascript中将元素放置在指定位置

Question

我有 five images在我的代码中，我想放下这些，以便将其放置在放置区域中的所需位置(circular position)。

即，

当五张图片放下时应该形成一个圆形形状而不是一条直线

如何实现？

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

Answer 1

使用nth-child()到 #div1 img 并使用 top/left

为每个图像设置位置

还使用 position:absolute 到 img 和 position:relative; 到 #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">