在javascript中使用第n个子元素指定图像在放置区域上的位置_Javascript_Html_Css

在javascript中使用第n个子元素指定图像在放置区域上的位置

javascript html css

在javascript中使用第n个子元素指定图像在放置区域上的位置,javascript,html,css,Javascript,Html,Css,在我的代码中我在classbox内有idbox1，box2，box3和box4四张图像可以将每个图像拖放到下方的矩形中我的问题是当我尝试使用css中的n个子项将其定位到放置区域时，它不起作用我不知道css中的错误发生在哪里如何使用第n个子项在放置的区域上定位图像。。？如何解决这个问题功能allowDrop（ev）{ ev.preventDefault（）； } 功能阻力（ev）{ ev.dataTransfer.setData（“文本”，ev.target.id）； } 功能下降（

在我的代码中

我在

class

box

内有

id

box1

，

box2

，

box3

和

box4

四张图像

可以将每个图像拖放到下方的矩形中
我的问题是当我尝试使用css中的n个子项将其定位到放置区域
时，它不起作用

我不知道css中的错误发生在哪里
如何使用第n个子项在放置的区域上定位图像。。？如何解决这个问题

功能allowDrop（ev）{
ev.preventDefault（）；
}
功能阻力（ev）{
ev.dataTransfer.setData（“文本”，ev.target.id）；
}
功能下降（ev）{
ev.preventDefault（）；
var data=ev.dataTransfer.getData（“文本”）；
控制台日志（数据）；
$（“#”+数据）.css（“位置”，“未设置”）；
ev.target.appendChild（document.getElementById（数据））；
}
正文{
背景重复：无重复；
背景尺寸：封面；
宽度：100%；
身高：100%；
溢出：隐藏；
背景尺寸：100vw 100vh；
}
#框1{
位置：绝对位置；
顶部：28.3vh；
左：-10.98vw；
光标：指针；
边框：1px实心#0066CC；
背景重复：无重复；
背景尺寸：包含；
}
#框1 p{
宽度：10.0vw；
高度：10.0vh；
边界半径：25%；
}
#框2{
位置：绝对位置；
顶部：13.7vh；
左：-10.98vw；
光标：指针；
边框：1px实心#0066CC；
背景重复：无重复；
背景尺寸：包含；
}
#框2 p{
宽度：5.0vw；
高度：5.0vh；
边界半径：25%；
}
#框3{
位置：绝对位置；
顶部：7.7vh；
左：43.98vw；
光标：指针；
边框：1px实心#0066CC；
背景尺寸：包含；
背景重复：无重复
}
#框3 p{
宽度：7.0vw；
高度：7.0vh；
边界半径：25%；
}
#方框4{
位置：绝对位置；
顶部：28.3vh；
左：40.98vw；
光标：指针；
边框：1px实心#0066CC；
背景重复：无重复；
背景尺寸：封面；
背景尺寸：包含；
}
#方框4 p{
宽度：10.0vw；
高度：10.0vh；
边界半径：25%；
}
.集装箱2{
宽度：50.1vw；
位置：固定；
顶部：10.5vh；
左：30.5vw；
}
.boxright1 p{
字体大小：calc（2vw）；
高度：4vh；
保证金：0；
颜色：白色；
背景尺寸：封面；
背景重复：无重复；
颜色：#0066ff；
文本阴影：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；
字体：'ChunkFiveRegular'；
}
.boxright1{
位置：绝对位置；
最高：65.3vh；
左：17.5vw；
宽度：61.0vw；
高度：35.0vh；
光标：指针；
边框：2件纯黑；
背景重复：无重复；
背景尺寸：包含；
背景图像：url（图像/名称%20board%20Without%20rope2.png）；
背景尺寸：40vw 55vh；
}
.boxRight 1.box{
位置：绝对位置；
}
.boxright1.box:第n个子项（1）{
顶部：0px；
左：155px；
}
.boxRight 1.框：第n个子项（2）{
顶部：5px；
左：215px；
}
.boxRight 1.框：第n个子项（3）{
顶部：0px；
左：315px；
}
.boxRight 1.box:n子项（4）{
顶部：5px；
左：415px；
}

将第n个子项应用于类boxright1不起作用




第一个问题是在拖放
例程中将拖放框的位置
设置为未设置
，这会导致无法再定位这些框。拆下那条线
第二个问题是特殊性问题。您首先以id为目标，例如#box1
，浏览器将保留为此定义的样式，无论您是否尝试使用.boxright1.box:n子项（…）

解决方案不是对原始选择器使用ID，而是使用类名。在下面的解决方案中，我将box1
等添加到框的类中，因此您可以使用.box1
而不是#box1
将它们作为目标，然后.boxright1.box:n子项（…）
选择器将覆盖该选项

功能allowDrop（ev）{
ev.preventDefault（）；
}
功能阻力（ev）{
ev.dataTransfer.setData（“文本”，ev.target.id）；
}
功能下降（ev）{
ev.preventDefault（）；
var data=ev.dataTransfer.getData（“文本”）；
控制台日志（数据）；
/*$（“#”+数据）.css（“位置”，“未设置”）*/
ev.target.appendChild（document.getElementById（数据））；
}
正文{
背景重复：无重复；
背景尺寸：封面；
宽度：100%；
身高：100%；
溢出：隐藏；
背景尺寸：100vw 100vh；
}
.box1{
位置：绝对位置；
顶部：28.3vh；
左：-10.98vw；
光标：指针；
边框：1px实心#0066CC；
背景重复：无重复；
背景尺寸：包含；
}
.BOX1P{
宽度：10.0vw；
高度：10.0vh；
边界半径：25%；
}
.box2{
位置：绝对位置；
顶部：13.7vh；
左：-10.98vw；
光标：指针；
边框：1px实心#0066CC；
背景重复：无重复；
背景尺寸：包含；
}
.box2p{
宽度：5.0vw；
高度：5.0vh；
边界半径：25%；
}
.box3{
位置：绝对位置；
顶部：7.7vh；
左：43.98vw；
光标：指针；
边框：1px实心#0066CC；
背景尺寸：包含；
背景重复：无重复
}
.box3 p{
宽度：7.0vw；
高度：7.0vh；
边界半径：25%；
}
.box4{
位置：绝对位置；
顶部：28.3vh；
左：40.98vw；
光标：指针；
边框：1px实心#0066CC；
背景重复：无重复；
背景尺寸：封面；
背景尺寸：包含；
}
.box4 p{
宽度：10.0vw；
高度：10.0vh；
边界半径：25%；
}
.集装箱2{
宽度：50.1vw；
位置：固定；
顶部：10.5vh；
左：30.5vw；
}
.boxright1 p{
字体大小：calc（2vw）；
高度：4vh；
保证金：0；
颜色：白色；
背景尺寸：cov