我的代码中有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">
答案 0 :(得分:2)
使用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">