Javascript 检查Dropable是否包含正确的Dragable？

我正在为大学制作一个简单的迪斯尼游戏。游戏的目标是有3个迪斯尼角色和6个名字。玩家必须将正确的名字拖到其中3个角色上，然后单击提交并移动到下一个级别

如何在单击按钮时验证角色图片（可拖放）上是否有正确的名称（可拖放）

这是我的密码

<div id="characters">
      <div id="character1"><img src="images/Goofy.png"></div>
      <div id="character2"><img src="images/Mickey_Mouse.png"></div>
      <div id="character3"><img src="images/snow_white.png"></div>
</div>

<div id="options">
     <div id="option1" class="option">Goofy</div>
     <div id="option2" class="option">Snow White</div>
     <div id="option3" class="option">Figaro</div>
     <div id="option4" class="option">Pete</div>
     <div id="option5" class="option">Mickey Mouse</div>
     <div id="option6" class="option">Donald Duck</div>
</div>
<button onclick="init()">Play Again</button>

---

您可以在调用drop函数时添加一个类（在您的示例中为“dropmake”），然后在提交时检查元素是否具有此类。大概是这样的：

函数checkdrop（）{
if（$（“#可拖放”）.hasClass（“ui状态突出显示”））{
警惕（“是”）；
}其他警告（“否”）；
}
$（函数（）{
$（“#可拖动”）.draggable（）；
$（“#可拖放”）。可拖放({
drop：函数（事件、用户界面）{
$（本）
.addClass（“ui状态突出显示”）
.查找（“p”）
.html（“已删除！”）；
}
});
} );
#可拖动{宽度：100px；高度：100px；填充：0.5em；浮动：左侧；边距：10px 10px 10px 0；}
#可拖放{宽度：150px；高度：150px；填充：0.5em；浮动：左侧；边距：10px；}




把我拖到我的目标

到这里来


$('#option1').draggable({
     containment: '#content',
     cursor: 'move',
     snap: '#content',
     revert: 'invalid',

 });

$("#character1, #character2, #character3").droppable({
    drop:dropmade,
    over: overMe,
    out: normal,
}) 
 });   

function dropmade(event, ui) {
   ui.draggable.draggable( 'disable' );
    alert('You have made a drop')
    $(this).droppable("destroy");

}

function overMe(event, ui) {
    $('#character1').css('background-color', 'green')
}

function normal(event, ui) {
    $('#character1').css('background-color', 'transparent ')
}

function init(event, ui ) {
var option = $("#character1");
var answer = ui.draggable.data('#option1')

if (option == answer) {
    alert("Hello")
}

}