要素をドラッグアンドドロップでペアリングしたい。マッチング方法は、div内の非表示のテキストです。ユーザーは、要素を「.answerContainer」からドラッグして、正しい「.circle」divにドロップする必要があります。
HTMLコード:
<div class="circleContainer">
<div class="circle first lineOne"> <span class="question">1</span></div>
<div class="circle second lineOne"><span class="question">2</span></div>
<div class="circle third lineTwo"> <span class="question">3</span></div>
</div>
<ul class="answerContainer">
<li class="first"> <span class="answer">1</span></li>
<li class="second"> <span class="answer">2</span></li>
<li class="third"> <span class="answer">3</span></li>
</ul>
私はこれを試していますが、機能しません:
$( ".answerContainer li" ).draggable({
revert: "invalid",
containment: "document",
cursor: "move"
});
$(".circle").each(function(i){
$this=$(this);
$this.droppable({
accept: function(event, ui) {
if($this.text()==event.text()){
return true;
}
},
activeClass: "ui-state-highlight",
drop: function( event, ui ) {
deleteAnswer( ui.draggable );
}
});
});