Javascript的拖放测试

我目前正在构建一个简单的拖放测试，但我只允许使用HTMLCSS和香草javascript。 这个想法是有一个带答案的div和一个带问题的div。在问题文本中有一些空白div，您可以在其中删除可拖动的答案

例如，你有答案“a，b，c”和“x，y，z”，问题是“字母表的前三个字母是：___;”

我需要两件主要事情的帮助：

我想让问题的空白div每个div只允许一个元素下降（我可以将它们堆叠在atm上）

下课后，我想检查当前问题div中的答案是否正确

我该怎么办

另外，我是html/css/js的新手，所以请告诉我，如果没有外部库和php，就不可能实现这一点

/*在拖动目标上激发的事件*/
document.addEventListener（“dragstart”，函数（事件）{
//setData（）方法设置被拖动数据的数据类型和值
event.dataTransfer.setData（“Text”，event.target.id）；
//开始拖动p元素时输出一些文本
document.getElementById（“demo”）.innerHTML=“开始拖动p元素。”；
//更改可拖动元素的不透明度
event.target.style.opacity=“0.4”；
});
//拖动p元素时，更改输出文本的颜色
document.addEventListener（“拖动”），函数（事件）{
document.getElementById（“演示”）.style.color=“红色”；
});
//完成拖动p元素并重置不透明度后，输出一些文本
文件。添加事件列表器（“dragend”，函数（事件）{
document.getElementById（“demo”）.innerHTML=“完成了对p元素的拖动。”；
event.target.style.opacity=“1”；
});
/*对放置目标激发的事件*/
//当可拖动的p元素进入droptarget时，更改div的边框样式
文件.附录列表器（“绘图器”，功能（事件）{
if（event.target.className==“droptarget”）{
event.target.style.border=“3px点红色”；
}
});
//默认情况下，不能在其他元素中删除数据/元素。为了允许删除，我们必须防止元素的默认处理
文件。添加事件列表器（“dragover”，功能（事件）{
event.preventDefault（）；
});
//当可拖动的p元素离开droptarget时，重置div的边框样式
文件。添加事件列表器（“dragleave”，函数（事件）{
if（event.target.className==“droptarget”）{
event.target.style.border=“”；
}
});
/*放置时-防止浏览器默认处理数据（默认为放置时作为链接打开）
重置输出文本的颜色和DIV的边框颜色
使用dataTransfer.getData（）方法获取拖动的数据
被拖动的数据是被拖动元素的id（“drag1”）
将拖动的元素追加到drop元素中
*/
document.addEventListener（“drop”），函数（事件）{
event.preventDefault（）；
if（event.target.className==“droptarget”）{
document.getElementById（“demo”）.style.color=“”；
event.target.style.border=“隐藏”；
var data=event.dataTransfer.getData（“文本”）；
event.target.appendChild（document.getElementById（数据））；
}
});
.droptarget{
显示：内联块；
最小宽度：50px；
高度：25px；
边框：1px实心#AAAAA；
颜色：#000；
文本对齐：居中；
}
.集装箱{
显示：内联块；
填充：15px；
利润率：10px；
背景：#eee；
边框：2件纯黑；
边界半径：5px；
框大小：边框框；
}
dragtarget先生{
背景色：红色；
填充物：5px；
边界半径：5px；
颜色：#fff；
字体大小：粗体；
文本对齐：居中；
}
多曼德先生{
显示：内联块；
填充：15px；
利润率：10px；
背景：#eee；
边框：2件纯黑；
边界半径：5px；
框大小：边框框；
}
Trascina la risposta nel quarto giusto

A、B、C
1,2,3
Prime tre lettere戴尔阿尔法贝托酒店
数字第一
使用相同的id确实是，它只能获得与
getElementById
相遇的第一个元素。相反，我将使用
dragstart
捕获拖动DOM，并在以后的
drop
中使用它。在
drop
中，您只需检查其中是否有子元素。如果是，则将该子级追加回
.container

你没有包括任何关于你将如何检查的细节，所以很难帮助，我只能帮你把问题和答案拿出来


var-dragP；
/*在拖动目标上激发的事件*/
document.addEventListener（“dragstart”，函数（事件）{
//setData（）方法设置被拖动数据的数据类型和值
//event.dataTransfer.setData（“Text”，event.target.id）；
dragP=event.target；
//开始拖动p元素时输出一些文本
document.getElementById（“demo”）.innerHTML=“开始拖动p元素。”；
//更改可拖动元素的不透明度
event.target.style.opacity=“0.4”；
});
//拖动p元素时，更改输出文本的颜色
document.addEventListener（“拖动”），函数（事件）{
document.getElementById（“演示”）.style.color=“红色”；
});
//完成拖动p元素并重置不透明度后，输出一些文本
文件。添加事件列表器（“dragend”，函数（事件）{
document.getElementById（“demo”）.innerHTML=“完成了对p元素的拖动。”；
event.target.style.opacity=“1”；
});
/*对放置目标激发的事件*/
//当可拖动的p元素进入droptarget时，更改div的边框样式
文件.附录列表器（“绘图器”，功能（事件）{
if（event.target.className==“droptarget”）{
event.target.style.border=“3px点红色”；
}
});
//默认情况下，不能在其他元素中删除数据/元素。允许一滴，