gpt4 book ai didi

javascript - 使用 javascript 中的第 n 个子项指定图像在放置区域的位置

转载 作者:可可西里 更新时间:2023-11-01 13:42:12 24 4
gpt4 key购买 nike

在我的代码中,

我在 class box 中有 four images id box1, box2box3box4..

每张图片都可以拖放到下面的矩形..

我的问题是当我尝试定位它在dropped area using nth child in css 它不工作

我无法弄清楚 css 中的错误在哪里?

如何使用第 n 个 child 将图像定位在拖放区域上......?如何解决?

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: 1px 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:1px 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:1px 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:1px 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 0px 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>

最佳答案

第一个问题是你在drop例程中将掉落框的position设置为unset,导致框没有不再被定位。删除该行。

第二个问题是特异性。您首先定位 id,例如 #box1,浏览器将保留为此定义的样式,无论您是否尝试使用 .boxright1 .box:nth-child 覆盖它们(...)

解决方案不是对原始选择器使用 id,而是使用类名。在下面的解决方案中,我已将 box1 等添加到框的类中,因此您可以使用 .box1 而不是 #box1 然后 .boxright1 .box:nth-child(...) 选择器将覆盖它。

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: 1px 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: 1px 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: 1px 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: 1px 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 0px 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 box1" 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 box2" 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 box3" 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 box4" 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>

关于javascript - 使用 javascript 中的第 n 个子项指定图像在放置区域的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54068924/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com