使用jqueryui"；拖放“；双人跳水

我想将元素与拖放进行配对。匹配方法是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>

两个问题：

有些div有空格，有些没有，因此使用

text（）

可能匹配也可能不匹配。改用

.find（'span'）.text（）

在accept回调中应该使用

$（this）

而不是

$this

，因为每次

each

命令都会覆盖$this

因此：

---

哦，是的，空间！非常感谢你！

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

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