![](/img/trans.png)
[英]specify position of images on dropped area using nth child in javascript
[英]How to position images on dropped area using nth child in javascript
我有four images
在class
box
有id
box1
, box2
, box3
和box4
..
each image
都可以dragged and dropped
到下面的rectangle
..
我的問題是當我try to position
使用css
nth child
try to position
它放置在dropped area
it is not working
在css中發生錯誤的地方在哪里?
如何使用第n個孩子在丟棄區域上定位圖像..
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"); console.log(data); $("#"+data).css("position","unset"); ev.target.appendChild(document.getElementById(data)); }
body{ background-repeat: no-repeat; background-size: cover; width:100%; height:100%; overflow: hidden; background-size: 100vw 100vh; } #box1 { position: absolute; top: 28.3vh; left: -10.98vw; cursor: pointer; border: px solid #0066CC; background-repeat: no-repeat; background-size: contain; } #box1 p { width: 10.0vw; height: 10.0vh; border-radius: 25%; } #box2 { position: absolute; top: 13.7vh; left: -10.98vw; cursor:pointer; border:px solid #0066CC; background-repeat:no-repeat; background-size: contain; } #box2 p { width: 5.0vw; height: 5.0vh; border-radius: 25%; } #box3 { position: absolute; top: 7.7vh; left: 43.98vw; cursor:pointer; border:px solid #0066CC; background-size: contain; background-repeat:no-repeat; } #box3 p { width: 7.0vw; height: 7.0vh; border-radius: 25%; } #box4 { position: absolute; top: 28.3vh; left: 40.98vw; cursor:pointer; border:px solid #0066CC; background-repeat:no-repeat; background-size:cover; background-size: contain; } #box4 p { width: 10.0vw; height: 10.0vh; border-radius: 25%; } .container2 { width: 50.1vw; position: fixed; top: 10.5vh; left: 30.5vw; } .boxright1 p { font-size: calc(2vw); height: 4vh; margin: 0; color: white; background-size: cover; background-repeat:no-repeat; color: #0066ff; text-shadow: 0px 0px 0px #999, 0px 0px 0px #888, 0px 0px 0px #777, 0px 0px 0px #6066, 0px 2px 0px #555, 0px 0px 0px #444, 0px 0px 0px #333, 0px 0 px 0px #001135; font:'ChunkFiveRegular'; } .boxright1 { position: absolute; top: 65.3vh; left: 17.5vw; width: 61.0vw; height: 35.0vh; cursor:pointer; border:2px solid black; background-repeat:no-repeat; background-size: contain; background-image:url(images/name%20board%20witout%20rope2.png); background-size: 40vw 55vh; } .boxright1 .box{ position: absolute; } .boxright1 .box:nth-child(1) { top: 0px; left: 155px; } .boxright1 .box:nth-child(2) { top: 5px; left:215px; } .boxright1 .box:nth-child(3) { top: 0px; left: 315px; } .boxright1 .box:nth-child(4) { top: 5px; left: 415px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p>applying nth child to Class boxright1 not working</p> <div class="container2"> <div class="containerr"> <div class="pic" id="content"> <div id="container"> <div class="box" id="box1" draggable="true" ondragstart="drag(event)" style="background-image:url(https://picsum.photos/200/300)"> <p name="values" id="name1" class="hidden"></p> </div> <div class="box" id="box2" draggable="true" ondragstart="drag(event)" style="background-image:url(https://picsum.photos/g/200/300)"> <p name="values" id="name2" class="hidden"></p> </div> <div class="box" id="box3" draggable="true" ondragstart="drag(event)" style="background-image:url(https://picsum.photos/200/300?image=0)"> <p name="values" id="name3" class="hidden"></p> </div> <div class="box" id="box4" draggable="true" ondragstart="drag(event)" style="background-image:url(https://picsum.photos/200/300/?gravity=east)"> <p name="values" id="name4" class="hidden"></p> </div> </div> </div> </div> </div> <div class="boxright1" ondrop="drop(event)" ondragover="allowDrop(event)" id="4" name="d"></div>
所以基本上你的錯誤是你忘記了.
在你的CSS中選擇一個類
所以代替(選擇元素<box>
)
.boxright1 box:nth-child(1) {
它應該是(選擇class="box"
)
.boxright1 .box:nth-child(1) {
並將!important添加到您的nth-child top和left值,以使其覆蓋初始的#box_x值
但通常你應該使用一些更優雅的方法,如(flex)網格或某事
您已經將#box1
設置為absolute
位置。 所以里面.boxright1
掉落區域nth-child
不工作。 所以你可以改變
#box1 {
position: absolute;
...
}
變成
#container .box:nth-child(1) {
position: absolute;
....
....
}
現在,您嘗試使用nth child
定位在dropped area
.boxright1 .box:nth-child(1) {
top: 0px;
left: 0px;
}
body{
background-repeat: no-repeat;
background-size: cover;
width:100%;
height:100%;
overflow: hidden;
background-size: 100vw 100vh;
}
#container .box:nth-child(1) {
position: absolute;
top: 1.3vh;
left: -10.8vw;
cursor: pointer;
border: px solid #0066CC;
background-repeat: no-repeat;
background-size: contain;
}
#box1 p {
width: 10.0vw;
height: 10.0vh;
border-radius: 25%;
}
#container .box:nth-child(2) {
position: absolute;
top: 13.7vh;
left: -10.98vw;
cursor:pointer;
border:px solid #0066CC;
background-repeat:no-repeat;
background-size: contain;
}
#box2 p {
width: 5.0vw;
height: 5.0vh;
border-radius: 25%;
}
#container .box:nth-child(3) {
position: absolute;
top: 7.7vh;
left: 43.98vw;
cursor:pointer;
border:px solid #0066CC;
background-size: contain;
background-repeat:no-repeat;
}
#box3 p {
width: 7.0vw;
height: 7.0vh;
border-radius: 25%;
}
#container .box:nth-child(4) {
position: absolute;
top: 28.3vh;
left: 40.98vw;
cursor:pointer;
border:px solid #0066CC;
background-repeat:no-repeat;
background-size:cover;
background-size: contain;
}
#box4 p {
width: 10.0vw;
height: 10.0vh;
border-radius: 25%;
}
.container2 {
width: 50.1vw;
position: fixed;
top: 10.5vh;
left: 30.5vw;
}
.boxright1 p {
font-size: calc(2vw);
height: 4vh;
margin: 0;
color: white;
background-size: cover;
background-repeat:no-repeat;
color: #0066ff;
text-shadow: 0px 0px 0px #999, 0px 0px 0px #888, 0px 0px 0px #777, 0px 0px 0px #6066, 0px 2px 0px #555, 0px 0px 0px #444, 0px 0px 0px #333, 0px 0
px 0px #001135;
font:'ChunkFiveRegular';
}
.boxright1 {
position: absolute;
top: 65.3vh;
left: 17.5vw;
width: 61.0vw;
height: 35.0vh;
cursor:pointer;
border:2px solid black;
background-repeat:no-repeat;
background-size: contain;
background-image:url(images/name%20board%20witout%20rope2.png);
background-size: 40vw 55vh;
}
.boxright1 .box{
position: absolute !important;
background-size: contain;
}
.boxright1 .box:nth-child(1) {
top: 0px;
left: 0px;
}
.boxright1 .box:nth-child(2) {
top: 5px;
left:140px;
}
.boxright1 .box:nth-child(3) {
top: 125px;
left: 50px;
}
.boxright1 .box:nth-child(4) {
top: 145px;
left: 145px;
}
當我查看.boxright1
drop容器中的元素檢查器時,我看到.box
元素上有內聯樣式。
element.style {
background-image: url(https://picsum.photos/200/300);
position: unset;
}
看起來你放棄它們后,你會在元素上取消JS中的值。
$("#"+data).css("position","unset");
由於position
未unset
,因此top
和left
值不再有任何意義。
如果您可以刪除該position: unset
,則元素將遵循您設置的top
和left
屬性,並相對於放置容器定位。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.