Перетащите вопрос в jquery UI - PullRequest
Новая
       2

Перетащите вопрос в jquery UI

0 голосов
/ 20 февраля 2020

Я использую jqueryUI для создания вопросов типа викторины. Когда я перетаскиваю правильный ответ (первый) в область, которую нужно убрать, он должен стать зеленым. Остальные варианты, он должен стать красным. Теперь он не работает должным образом ... Может кто-нибудь, пожалуйста, помогите мне в этом .?

Моя работа:

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

Это фрагмент кода, который я использовал. 

$( 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" )
      }
    });
  } );

1 Ответ

0 голосов
/ 21 февраля 2020

Вам нужно условие, чтобы помочь решить. Вы можете использовать оператор 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>
...