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

两个问题：

您的某些div有空格，有些则没有，因此使用text()可能匹配也可能不匹配。请改用.find('span').text()。
您应该在接受回调中使用$(this)而不是$this，因为每次each命令都会覆盖$ this。

所以：

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

使用jQuery UI“拖放”对div

1 个答案: