使用jquery拖放到目标

Question

我正在使用 jquery 进行拖放游戏。

游戏的目的是将图片拖动到目标div。

当将图片拖入 div 目标时......它会提示“正确”或“不正确”，但我无法让它正常工作。

我正在尝试如下操作：

      <img src="1.png" id="answer1">
      <img src="2.png" id="answer2">
      <img src="3.png" id="answer3">

      <div id="target1">
            drop here

       <script>
        $("#answer1").draggable();
        $("#answer2").draggable();
        $("#answer3").draggable();
        $("#target1").droppable({
  drop: function() {

                 if($("#target1:has(img.answer1)").length > 0)
                        {

                            alert('Correct');

                        }
                    else
                        {
                            alert('Incorrect');
                        }



                    }

                                });

</script>

      </div>

但总是在第二个条件下进入警报（“不正确”）

我的代码有什么问题？

Answer 1

如果要查看被拖动元素的id，可以在drop event:ui.draggable.attr("id")中获取被拖动元素的id。

所以把你的脚本改成

$("#answer1").draggable();
$("#answer2").draggable();
$("#answer3").draggable();
$("#target1").droppable({
drop: function(event, ui) {
        if(ui.draggable.attr("id")=='answer1')
         {
              alert('Correct');
         }
         else
         {
              alert('Incorrect');
         }    
    }
});

您可以在Fiddle查看现场演示。