Jquery ui jqueryui中的拖放问题

我正在使用jqueryUI创建测验类型的问题。 当我将正确答案（第一个）拖放到可拖放区域时，它应该变成绿色。 剩下的选项，它应该变成红色。 现在我们的生活没有得到很好的改善。。谁能帮我一下吗

我的工作：

这是我使用的代码片段

$( function() {
    $( "#draggable" ).draggable();
    $( "#droppable" ).droppable({
      drop: function( event, ui ) {
        $( this )
          .addClass( "ui-state-highlight" )
      }
    });
  } );

$( function() {
  $( "#draggable1" ).draggable();
  $( "#draggable2" ).draggable();
  $( "#draggable3" ).draggable();
    $( "#droppable" ).droppable({
      drop: function( event, ui ) {
        $( this )
          .addClass( "ui-state-red" )
      }
    });
  } );

---

你需要一个条件来帮助决定。您可以使用

if

语句或其他方法来确定应该添加哪个类

$（函数（）{
$（“div[id^='draggable']）；
$（“#可拖放”）。可拖放({
drop：函数（事件、用户界面）{
如果（ui.draggable.text（）.trim（）=“C”）{
$（this.addClass（“ui状态绿色”）；
}否则{
$（this.addClass（“ui状态红色”）
}
}
});
});
#可拖动，
#可拖动1，
#可拖动的2，
#可拖动的3{
宽度：100px；
高度：100px；
填充：0.5em；
保证金：10px 10px 10px 0；
边框：1px实心#ccc；
背景：#fff；
浮动：左；
}
人力资源{
浮动：左；
宽度：100%；
背景：#ccc；
}
#可降落{
宽度：400px；
高度：150像素；
填充：0.5em；
浮动：左；
利润率：10px；
边框：1px实心#ccc；
背景：#fff；
}
#droppable.ui-state-green{
背景：绿色；
}
#droppable.ui-state-red{
背景：#ff0000；
}


A

B

C

D

重置
@VimalRaj由于您现在已经针对同一问题发布了第二个问题，我强烈建议您回顾本教程：同时：