jquery UI中的拖放问题

Question

我正在使用 jqueryUI 创建测验类型的问题。 当我将正确答案（第一个）拖放到可放置区域时，它应该变成绿色。 其余选项，它应该变成红色。 现在它不能正常转动.. 谁能帮我解决这个问题。？

我的作品：

https://codepen.io/vimalraj86/pen/poJyOQr

这是我用过的代码sn-p。

$( 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

您需要一个条件来帮助您做出决定。您可以使用if 语句或其他方式来确定应该添加哪个类。

$(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>