Drag and drop issue in jquery UI - jquery-ui

Question

Im using jqueryUI for creating quiz type questions.
When I drag and drop correct answer(first one) to droppable area, it should turn green.
Rest of options, it should turn red.
Now it is not turning our properly.. can anyone pls help me on this.?
My work:
https://codepen.io/vimalraj86/pen/poJyOQr
This is the code snippet i have used.
$( 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" )
}
});
} );

Answer 1

You need a condition to help decide. You can use an if statement or some other way to determine which class should be added.
$(function() {
$("div[id^='draggable']").draggable();
$("#droppable").droppable({
drop: function(event, ui) {
if (ui.draggable.text().trim() == "C") {
$(this).addClass("ui-state-green");
} else {
$(this).addClass("ui-state-red")
}
}
});
});
#draggable,
#draggable1,
#draggable2,
#draggable3 {
width: 100px;
height: 100px;
padding: 0.5em;
margin: 10px 10px 10px 0;
border: 1px solid #ccc;
background: #fff;
float: left;
}
hr {
float: left;
width: 100%;
background: #ccc;
}
#droppable {
width: 400px;
height: 150px;
padding: 0.5em;
float: left;
margin: 10px;
border: 1px solid #ccc;
background: #fff;
}
#droppable.ui-state-green {
background: green;
}
#droppable.ui-state-red {
background: #ff0000;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="droppable" class="ui-widget-header"></div>
<hr/>
<div id="draggable" class="ui-widget-content">
<p>A</p>
</div>
<div id="draggable1" class="ui-widget-content">
<p>B</p>
</div>
<div id="draggable2" class="ui-widget-content">
<p>C</p>
</div>
<div id="draggable3" class="ui-widget-content">
<p>D</p>
</div>
<button id="reset">reset</button>