计数jquery ui拖放

Question

我想使用jQuery UI创建一个拖放框。 我还有一个输入/提交按钮，这样每当我单击该按钮时，计数就会增加。 如果该框被丢弃，则计数可以为1，否则为0。

该代码不起作用：

 $(function() {
   var count = 0;
   $("#draggable").draggable();
   $("#droppable").droppable({
     drop: function(event, ui) {
       //  var draggable = ui.draggable;
       // alert('The square with ID "' + draggable.attr('id') + '" was dropped onto me!');
       if ($(ui.draggable).hasClass("draggable")) {
         $(this)
           .find("p")
           .html("Correct!");
         count++;
         $(".counttext").text("There are " + count + " divs inside parent box detail.");
         if (count == 2) {
           alert("You got them all right!");
         }
       } else {
         $(this)
           .find("p")
           .html("Wrong!");
       }
     }
   });
 });

Answer 1

这是完成您要完成的工作的一种方法：

http://jsfiddle.net/Twisty/ttyt320c/

jQuery查询

var foodCount = 0;

$(function() {
  $(".draggable").draggable();
  $(".wrong").draggable();
  $("#droppable").droppable({
    accept: ".draggable",
    drop: function(event, ui) {
      console.log("Accepting object.");
      ui.draggable.draggable("destroy");
      if (ui.draggable.attr("class") === "draggable") {
        foodCount++;
        console.log("Count: " + foodCount);
        $(".count").text(foodCount);
        alert('correct');
      }
    }
  });
});

在drop ，我们只想接受一个特定的对象。 以后可以根据需要以其他方式使用它，例如还原对象。 我们检查放置的对象的class 。 如果它是draggable我们将更新计数并删除draggable()功能，使其无法移动。