jquery - ペアdivにjQueryUI「ドラッグアンドドロップ」を使用する

Question

要素をドラッグアンドドロップでペアリングしたい。マッチング方法は、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 );
                }
    });
});

Answer 1

2つの問題：

1. 一部のdivにはスペースがあり、一部にはスペースがないため、を使用text()すると一致する場合と一致しない場合があります。.find('span').text()代わりに使用してください。
2. $ thisはコマンドによって毎回上書きされるため、acceptコールバック内では$(this)なくを使用する必要があります。$thiseach

それで：

$(".circle").each(function(i){
     $this=$(this);
     $this.droppable({
          accept:  function(element) {
                    if($(this).find('span').text()==element.find('span').text()) { 
                        return true;
                    }
                  },
          drop: function( event, ui ) {
                    deleteAnswer( ui.draggable );
                }
    });
});