[英]How to position images on dropped area using nth child in javascript
I have four images
inside class
box
having id
box1
, box2
, box3
and box4
.. 我有
four images
在class
box
有id
box1
, box2
, box3
和box4
..
each image
can be dragged and dropped
to rectangle
below.. each image
都可以dragged and dropped
到下面的rectangle
..
my problem is when i try to position
it on the dropped area
using nth child
in css
it is not working
我的问题是当我
try to position
使用css
nth child
try to position
它放置在dropped area
it is not working
where is the mistake happenining in css? 在css中发生错误的地方在哪里?
How to position images on dropped area using nth child.. 如何使用第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>
So basically your error is that you forgot the .
所以基本上你的错误是你忘记了
.
in your css to select a class 在你的CSS中选择一个类
so instead of (selecting element <box>
) 所以代替(选择元素
<box>
)
.boxright1 box:nth-child(1) {
it should be (selecting class="box"
) 它应该是(选择
class="box"
)
.boxright1 .box:nth-child(1) {
And add !important to your nth-child top and left values to make it override the initial #box_x values 并将!important添加到您的nth-child top和left值,以使其覆盖初始的#box_x值
But generally you should use some more elegant approach like a (flex)grid or sth 但通常你应该使用一些更优雅的方法,如(flex)网格或某事
Already you set #box1
as absolute
position. 您已经将
#box1
设置为absolute
位置。 so inside .boxright1
dropped area nth-child
not working. 所以里面
.boxright1
掉落区域nth-child
不工作。 so you can change 所以你可以改变
#box1 {
position: absolute;
...
}
change into 变成
#container .box:nth-child(1) {
position: absolute;
....
....
}
Now you try to position on the dropped area
using nth child
现在,您尝试使用
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;
}
When I looked at the elements inspector inside the .boxright1
drop container, I saw that there were inlined styles on the .box
elements. 当我查看
.boxright1
drop容器中的元素检查器时,我看到.box
元素上有内联样式。
element.style {
background-image: url(https://picsum.photos/200/300);
position: unset;
}
It looks like you're unsetting the values in the JS on the elements after you drop them. 看起来你放弃它们后,你会在元素上取消JS中的值。
$("#"+data).css("position","unset");
Because position
is getting unset
, the top
and left
values have no meaning anymore. 由于
position
未unset
,因此top
和left
值不再有任何意义。
If you could remove that position: unset
from happening, then the elements would respect the top
and left
properties you set, and get positioned relative to the drop container. 如果您可以删除该
position: unset
,则元素将遵循您设置的top
和left
属性,并相对于放置容器定位。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.