How to position images on dropped area using nth child in javascript

Question

I have four images inside class box having id box1, box2, box3 and box4..

each image can be dragged and dropped to rectangle below..

my problem is when i try to position it on the dropped area using nth child in css it is not working

where is the mistake happenining in css?

How to position images on dropped area using 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: 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

So basically your error is that you forgot the . in your css to select a class

so instead of (selecting element <box>)

.boxright1 box:nth-child(1) {

it should be (selecting 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

But generally you should use some more elegant approach like a (flex)grid or sth

Answer 2

Already you set #box1 as absolute position. so inside .boxright1 dropped area nth-child not working. 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

.boxright1 .box:nth-child(1) {
    top: 0px;
    left: 0px;
}

View Demo

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;
}

Answer 3

When I looked at the elements inspector inside the .boxright1 drop container, I saw that there were inlined styles on the .box elements.

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.

$("#"+data).css("position","unset");

Because position is getting unset, the top and left values have no meaning anymore.

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.