javascript - 如何在javascript中使用第n个 child 将图像定位在拖放区域

Question

我在 class box 中有 four images id box1, box2、box3 和 box4..

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

我的问题是当我尝试定位它在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: 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>

Answer 1

所以基本上你的错误是你忘记了 .在你的CSS中选择一个类

所以而不是(选择元素<box>)

.boxright1 box:nth-child(1) {

应该是(选择class="box")

.boxright1 .box:nth-child(1) {

并将 !important 添加到您的第 n 个子项的顶部和左侧值，以使其覆盖初始的 #box_x 值

但通常你应该使用一些更优雅的方法，比如( flex )网格或其他