在javascript中使用第n个子项指定丢弃区域上的图像位置

Question

在我的代码中，

我有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: 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> 

Answer 1

第一个问题是您在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>