Question

我在while i<5: inp = input("What's your guess for a letter in the word?\n") if inp in word: print("Yes, we have this letter.") class: mobile { GameObject mobileObject; SpriteRenderer mobileSR; int height; int width; } void Start() { mobile clone; clone = Instantiate(mobile); Destroy(clone); //object clone didn't delete :( }中有four images，其中class box，id，box1和box2 ..

box3可以在下面的box4至each image中。

我的问题是我在dragged and dropped rectangle中使用try to position在dropped area上nth child

css中发生的错误在哪里？

如何使用第n个子对象将图像放置在放置区域上。

css

it is not working

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

Answer 1

所以基本上您的错误是您忘记了CSS中的.以选择一个班级

所以而不是（选择元素<box>）

.boxright1 box:nth-child(1) {

应该是（选择class="box"）

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

并在第n个子项的顶部和左侧值中添加！important以使其覆盖初始的#box_x值

但是通常您应该使用一些更优雅的方法，例如（flex）grid或sth

Answer 2

您已经将#box1设置为absolute的位置。因此在.boxright1下降区域nth-child内部无效。因此您可以更改

#box1 {
  position: absolute;
  ...
}

更改为

#container .box:nth-child(1) { 
  position: absolute;
  ....
  ....
}

现在，您尝试使用dropped area定位在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

当我查看.boxright1放置容器中的元素检查器时，我发现.box元素上有内联样式。

element.style {
    background-image: url(https://picsum.photos/200/300);
    position: unset;
}

在您删除元素后，似乎要在JS中取消设置它们的值。

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

由于position正在获得unset，因此top和left的值不再有意义。

如果您可以将发生的position: unset删除，则元素将尊重您设置的top和left属性，并相对于放置容器定位。

如何在JavaScript中使用第n个子元素将图像放置在放置区域上

3 个答案:

View Demo