Javascript 如何在事件下降中给出条件

我有四个盒子，里面有鸟和鱼的图像。我有一个

.boxleft

和

.boxright

，四个框中的每一个都可以拖放到

.boxleft

或

.boxright

我的问题是，我想设定一个条件，即只有鱼可以放到

.boxleft

，只有鸟可以放到

.boxlright

。如何做到这一点

var array2=[]；
可变项目=[{
标签：“鸽子”，
网址：'https://i.ibb.co/MgBS9P7/bpigeon.jpg'
},
{
标签：“金鱼”，
网址：'https://i.ibb.co/MRCV8Sn/fgoldfish.png'
},
{
标签：“鹦鹉”，
网址：'https://i.ibb.co/TwPtqx5/bparrot.jpg'
},
{
标签：'fshark'，
网址：'https://i.ibb.co/xCpks04/fshark.png'
},
];
var tempimages=[]；
array2=items.slice（）；
var项目；
函数rvalue（）{
元素=document.getElementsByClassName（“框”）；
ptags=document.querySelectorAll（'[name=“values”]'）；
boxtags=document.getElementsByClassName（“box”）；
对于（让索引=0；索引<4；索引++）{
项目=阵列2[索引]；
//控制台日志（项目）；
试一试{
ptags[index].textContent=item.label；
ptags[index].dataset.itemlab=item.url；
//ptags[index].style.visibility=“hidden”；
boxtags[index].style.backgroundImage='url（'+item.url+'）；
}捕捉（错误）{
//console.log（'Exception'）；
}
}
}
右值（）；
功能allowDrop（ev）{
ev.preventDefault（）；
}
功能阻力（ev）{
ev.dataTransfer.setData（“文本”，ev.target.id）；
}
功能下降（ev）{
ev.preventDefault（）；
var data=ev.dataTransfer.getData（“文本”）；
var pText=$（“#”+数据）.children（）[0].id；
$（“#”+pText）.removeClass（“隐藏”）；
ev.target.appendChild（document.getElementById（pText））；
//ptags[index].style.visibility=“visible”；
}

#框1{
位置：绝对位置；
顶部：-10.3vh；
左：-30.98vw；
光标：指针；
边框：px实心#0066CC；
背景重复：无重复；
背景尺寸：包含；
}
#框1 p{
宽度：10.0vw；
高度：10.0vh；
边界半径：25%；
}
#框2{
位置：绝对位置；
顶部：-10.3vh；
左：-10.98vw；
光标：指针；
边框：px实心#0066CC；
背景重复：无重复；
背景尺寸：包含；
}
#框2 p{
宽度：10.0vw；
高度：10.0vh；
边界半径：25%；
}
#框3{
位置：绝对位置；
顶部：-10.3vh；
左：0.98vw；
光标：指针；
边框：px实心#0066CC；
背景重复：无重复；
背景尺寸：包含；
}
#框3 p{
宽度：10.0vw；
高度：10.0vh；
边界半径：25%；
}
#方框4{
位置：绝对位置；
顶部：-10.3vh；
左：20.98vw；
光标：指针；
边框：px实心#0066CC；
背景重复：无重复；
背景尺寸：包含；
}
#方框4 p{
宽度：10.0vw；
高度：10.0vh；
边界半径：25%；
}
Boxlight先生{
位置：绝对位置；
顶部：48.3vh；
左：-25.98vw；
宽度：14.0vw；
高度：40.0vh；
光标：指针；
边框：2件纯黑；
}
boxright先生{
位置：绝对位置；
顶部：48.3vh；
左：25.98vw；
宽度：14.0vw；
高度：40.0vh；
光标：指针；
边框：2件纯黑；
}
#容器{
空白：nowrap；
边框：px实心#CC0000；
}
康奈尔先生{
边框：px实心#FF3399；
}
图{
背景大小：100%100%；
}
.集装箱2{
宽度：50.1vw；
位置：固定；
顶部：10.5vh；
左：30.5vw；
}
.方框p{
字体大小：calc（2vw+10px）；
}
.boxleft p{
字体大小：calc（4vw）；
高度：4vh；
背景：皇家蓝；
保证金：0；
颜色：白色；
}
.boxright p{
字体大小：calc（4vw）；
高度：4vh；
背景：皇家蓝；
保证金：0；
颜色：白色；
}
.隐藏{
可见性：隐藏；
}
p{
字体：“Courier New”，Courier，monospace；
字体大小：5vw；
颜色：rgba（0,0,0,0.6）；
文本阴影：2px 8px 6px rgba（0,0,0,0.2），0px-5px 35px rgba（255,255,0.3）；
颜色：#005ce6；
文本对齐：居中；
}

您必须知道这些项目的类型，请查看下面的演示，我已更新了

项目

，并在

拖放功能中做了一些更改，以检测项目类型和我们将项目拖放到的框

我使用该方法检索项目，然后使用双感叹号
将结果转换为布尔值，因为
find
返回对象或未定义的结果

var-isBird=！！items.find（i=>i.label.toLowerCase（）==label&&i.type===avian'）


var array2=[]；
/**使用类型更新项目*/
可变项目=[{
标签：“鸽子”，
类型：'禽'，
网址：'https://i.ibb.co/MgBS9P7/bpigeon.jpg'
},
{
标签：“金鱼”，
类型：'水生'，
网址：'https://i.ibb.co/MRCV8Sn/fgoldfish.png'
},
{
标签：“鹦鹉”，
类型：'禽'，
网址：'https://i.ibb.co/TwPtqx5/bparrot.jpg'
},
{
标签：'fshark'，
类型：'水生'，
网址：'https://i.ibb.co/xCpks04/fshark.png'
},
];
var tempimages=[]；
array2=items.slice（）；
var项目；
函数rvalue（）{
元素=document.getElementsByClassName（“框”）；
ptags=document.querySelectorAll（'[name=“values”]'）；
boxtags=document.getElementsByClassName（“box”）；
对于（让索引=0；索引<4；索引++）{
项目=阵列2[索引]；
//控制台日志（项目）；
试一试{
ptags[index].textContent=item.label；
ptags[index].dataset.itemlab=item.url；
//ptags[index].style.visibility=“hidden”；
boxtags[index].style.backgroundImage='url（'+item.url+'）；
}捕捉（错误）{
//console.log（'Exception'）；
}
}
}
右值（）；
功能allowDrop（ev）{
ev.preventDefault（）；
}
功能阻力（ev）{
ev.dataTransfer.setData（“文本”，ev.target.id）；
}
函数dro