jquery - 对 div 使用 jQuery UI “拖放”

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

两个问题：

1. 有些 div 有空格，有些没有，所以使用text()可能匹配也可能不匹配。改为使用.find('span').text()。
2. 您应该在您的接受回调中使用$(this)而不是$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 );
                }
    });
});