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()能力，以便无法移动。

计算jquery ui拖放

1 个答案: