使用jQuery UI「拖放」對象div

Question

我想通過拖放來配對元素。匹配方法是divs中的隱藏文本。用戶必須將該元素從「.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

兩個問題：

1. 一些您的div有空格，有些則沒有，所以使用text()可能會或可能不匹配。改爲使用.find('span').text()。
2. 在接受回調中，您應該使用$(this)而不是$this，因爲$每次都會被each命令覆蓋。

所以：

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