Javascript 如何在java脚本中添加拖放元素的效果

我创建了一个简短的练习，其中包括3个特定形状的方框。我现在已经设置好了，如果有人将形状拖动到正确的框中，它将被放置在框中。但是，当前如果有人将形状拖到错误的形状，它只会重置。我想添加一些效果，例如，如果该人拖动到错误的一个，它会重置，并在框中显示红色闪烁，如果正确，则显示绿色闪烁。如果可能的话，即使用户将红色闪光添加到正确的框中，但在指定的数字之后，例如三角形框中的第三个三角形，也可以显示红色闪光。如何做到这一点？这是我当前的代码

var circ=document.getElementById（“c1”）；
var tria=document.getElementById（“t1”）；
var squa=document.getElementById（“s1”）；
var circ2=document.getElementById（“c2”）；
var tria2=document.getElementById（“t2”）；
var squa2=document.getElementById（“s2”）；
var dropt=document.getElementById（“dzt”）；
var dropc=document.getElementById（“dzc”）；
var drops=document.getElementById（“dzs”）；
circ.ondragstart=功能（evt）{
evt.dataTransfer.setData（'key1'，evt.target.id）；
console.log（“拖动圆”）；
}
tria.ondragstart=功能（evt）{
evt.dataTransfer.setData（'key2'，evt.target.id）；
log（“拖动三角形”）；
}
squa.ondragstart=函数（evt）{
evt.dataTransfer.setData（'key3'，evt.target.id）；
控制台日志（“拖动方块”）；
}
/*circ2.ondragstart=函数（）{
setData（'key4'，'c2'）；
控制台日志（“yesh”）；
}
tria2.ondragstart=函数（）{
setData（'key5'，'t2'）；
控制台日志（“nani”）；
}
squa2.ondragstart=函数（）{
setData（'key6'，'s1'）；
控制台日志（“omae wa”）；
}
*/
dropt.ondragover=函数（evt）{
evt.preventDefault（）；
控制台日志（“超过t”）；
}
dropc.ondragover=函数（evt）{
evt.preventDefault（）；
控制台日志（“通过c”）；
}
drops.ondragover=函数（evt）{
evt.preventDefault（）；
控制台日志（“超过s”）；
}
dropt.ondrop=函数（evt）{
evt.preventDefault（）；
var icont=evt.dataTransfer.getData（'key2'）；
控制台日志（“下降t”）；
控制台日志（icont）；
var current=document.getElementById（icont）；
console.log（当前）；
var newcurrent=document.createElement（'img'）；
newcurrent.src=current.src；
dropt.appendChild（newcurrent）；
}
dropc.ondrop=函数（evt）{
evt.preventDefault（）；
var iconc=evt.dataTransfer.getData（'key1'）；
控制台日志（“下降c”）；
控制台日志（iconc）；
var current=document.getElementById（iconc）；
console.log（当前）；
var newcurrent=document.createElement（'img'）；
newcurrent.src=current.src；
dropc.appendChild（newcurrent）；
}
drops.ondrop=函数（evt）{
evt.preventDefault（）；
var icons=evt.dataTransfer.getData（'key3'）；
控制台日志（“下拉列表”）；
控制台日志（图标）；
var current=document.getElementById（图标）；
console.log（当前）；
var newcurrent=document.createElement（'img'）；
newcurrent.src=current.src；
drops.appendChild（newcurrent）；
}

#主体{
宽度：100%；
身高：100%；
}
.集装箱{
显示器：flex；
}
.栏目{
弹性：1；
背景：#ffffff；
边框：1px实心#ffffff；
框大小：边框框；
}
.第一栏{
顺序：3；
}
.第二栏{
顺序：1；
}
.第三栏{
顺序：4；
}
.第四栏{
顺序：2；
}
.第五栏{
顺序：5；
}
。落客区1{
对齐内容：居中对齐；
宽度：150px；
高度：150像素；
边界：2px；
边框样式：实心；
边框颜色：#535f6b；
}
。落客区2{
对齐内容：居中对齐；
宽度：150px；
高度：150像素；
边界：2px；
边框样式：实心；
边框颜色：#535f6b；
}
.降落区3{
对齐内容：居中对齐；
宽度：150px；
高度：150像素；
边界：2px；
边框样式：实心；
边框颜色：#535f6b；
}
.icon1{
宽度：50px；
高度：50px；
左边距：45像素；
}
.icon2{
宽度：50px；
高度：50px；
左边距：56px；
对齐内容：居中对齐；
}
.icon3{
宽度：50px；
高度：50px；
左边距：58px；
}
.问题{
文本对齐：居中；
颜色：#535f6b；
字体系列：无衬线；
字体：斜体；
}

将元素拖放到相应的集合以实现：
a。圆集合中有3个圆
b。三角形集中有两个三角形
c。正方形集合中有5个正方形

在下面的代码片段中，我添加了一些条件来检查对象是否在其区域中拖动，如果是，我添加了具有动画背景的类（在底部创建的Annation），否则它将检查拖动区域是否有子对象（不要触发错误Annation，否则触发错误Annation）

您可以通过更改css annimation和css类

.green

和

.red

来设置自己的annimation和颜色 请参阅下面的代码片段

var circ=document.getElementById（“c1”）；
var tria=document.getElementById（“t1”）；
var squa=document.getElementById（“s1”）；
var circ2=document.getElementById（“c2”）；
var tria2=document.getElementById（“t2”）；
var squa2=document.getElementById（“s2”）；
var dropt=document.getElementById（“dzt”）；
var dropc=document.getElementById（“dzc”）；
var drops=document.getElementById（“dzs”）；
tria.ondragstart=功能（evt）{
evt.dataTransfer.setData（'key2'，evt.target.id）；
log（“拖动三角形”）；
}
circ.ondragstart=功能（evt）{
evt.dataTransfer.setData（'key1'，evt.target.id）；
console.log（“拖动圆”）；
}
squa.ondragstart=函数（evt）{
evt.dataTransfer.setData（'key3'，evt.target.id）；
控制台日志（“拖动方块”）；
}
/*circ2.ondragstart=函数（）{
setData（'key4'，'c2'）；
控制台日志（“yesh”）；
}
tria2.ondragstart=函数（）{
setData（'key5'，'t2'）；
控制台日志（“nani”）；
}
squa2.ondragstart=函数（）{
setData（'key6'，'s1'）；
有限公司