我曾four images里面class box有id box1,box2,box3和box4..
each image可以dragged and dropped到rectangle下面..
我的问题是当try to position它在dropped area使用nth child时css 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;
} …我有一个数组音符,上面有九个jpg,一个数组项目有九个标签和九个网址.
这段代码有三个框items从数组项中随机选择3 个.
我已将随机选择的项目label放在3个框内,内部<P>标记以及数组项目背景上的相应图像
我已经将randomIndex选择中的音符的有趣图像存储到数组注释中,这被调用到box002 img src
可以将类box002拖放到显示的四个框中的相应数字.然后蓝色数字和框中的背景消失.
我现在有一个工作代码
我的问题是我想box002项目应该与盒子数字相同,现在drop是从左侧盒子开始
即如果box002数字是2,那么drop(最左边的框)应该是蓝色2数字,背景url image2
如何更改我的代码以实现此目的.
var array2 = [];
var items = [{
label: '1',
url: 'https://via.placeholder.com/150x150.jpg?text=image1'
},
{
label: '2',
url: 'https://via.placeholder.com/150x150.jpg?text=image2'
},
{
label: '3',
url: 'https://via.placeholder.com/150x150.jpg?text=image3'
},
{
label: '4',
url: 'https://via.placeholder.com/150x150.jpg?text=image4'
},
{
label: '5',
url: 'https://via.placeholder.com/150x150.jpg?text=image5'
},
{
label: '6',
url: 'https://via.placeholder.com/150x150.jpg?text=image6'
},
{
label: '7',
url: 'https://via.placeholder.com/150x150.jpg?text=image7'
},
{
label: …我有一个类box2,box,box包含从array2中随机选择的值,它是数组项的副本
当拖动的元素URL与删除的元素标签匹配时,背景颜色消失.
我已经给出条件if tempimages==0随机选择再次发生.即,当drop是最后一个元素时.
我的问题是当drop到达倒数第二个元素时, 会在类框中随机选择和重新填充元素
我希望这发生在最后一个盒子上.
如何实现和纠正呢？
var items = [{
label: '1:40',
url: 'https://via.placeholder.com/75x75?text=1'
},
{
label: '2:20',
url: 'https://via.placeholder.com/75x75?text=2'
},
{
label: '3:50',
url: 'https://via.placeholder.com/75x75?text=3'
},
{
label: '4:45',
url: 'https://via.placeholder.com/75x75?text=4'
},
{
label: '5:35',
url: 'https://via.placeholder.com/75x75?text=5'
},
{
label: '6:10',
url: 'https://via.placeholder.com/75x75?text=6'
},
{
label: '7:15',
url: 'https://via.placeholder.com/75x75?text=7'
},
{
label: '8:10',
url: 'https://via.placeholder.com/75x75?text=8'
},
{
label: '9:30',
url: 'https://via.placeholder.com/75x75?text=9'
},
{ …