Question

答案

对于其他任何尝试这样做的人，我可以通过在带有

的.click函数之前向droppable添加一个空类来实现。

$("#game1drop4").droppable ({
    accept: "#game1img4",
    drop: function(e,ui) {
      $(this).addClass("correct");
    }
    });

然后在click函数之后，我检查了droppable是否有空类，如果是，我添加了一个具有背景更改的新类。像这样：

$("#submitG1").click( function check() {

    if ($("#game1drop1").hasClass("correct")) {
      $("#game1drop1").addClass("iscorrect");
      $("#game1img1").draggable("disable");
    }
    else {
      $(this).animate({left:0,top:0});
    }

所以我试图构建一个游戏，用户必须以正确的顺序放置图像（可拖动的）才能进入下一个级别。我希望用户能够放置所有图像，然后单击“提交”，如果图像放置在右侧的droppable中，则可以使用可放置的背景更改颜色。我已经发现要更改图片下拉的背景，但如果图像（可拖动）已经在droppable中，则无法更新它。我已将我的代码发布在小提琴上here但是如果没有可拖动的图片，它看起来有点时髦。＆＃39;

为了确定右侧可拖动是否正确，我在html中分配了每个可拖动和ID，然后在我使用的每个可放置的js下面＆＃34;接受：＆＃34;＃game1img1＆＃34;＆＃34;告诉它确定哪个可拖动接受。可能不是最有效的方法，但它是我能想出的唯一方法。

以下是它认为最重要的代码

$(document).ready( function() {
$(function () {
// everything with the class "draggable" will be made draggable  


  $( ".draggable" ).draggable({
    //makes all draggables revert to their orginal postition if their drop is not valid
    revert: "invalid"
  });
  $(".droppable").droppable()

   $("#game1img1").draggable({
    snap: ".droppablep",
    snapTolerance: 25
  });
  $(".instructionhider").click(function () {
      $(".instructions").hide();       
    });
   // Checks if object being dropped is correct for all droppables
   $("#submitG1").click( function() {

  $("#game1drop1").droppable ({
   accept: "#game1img1", 
    drop: function(e,ui) {
      $(this).addClass("correct");
      $('#correct1').addClass('.correctText');
    }
    });


  if $(ui.draggable.attr("id") === (this).attr("id")).droppable) {
    $(this).addClass("correct");
   }
   else {
      revert: function(event, ui) {
        $(this).data("uiDraggable").originalPosition = {
            top : 0,
            left : 0,
           return !event;
      }

    });


  $("#game1drop3").droppable ({
    accept: "#game1img3",
    drop: function(e,ui) {
      $(this).addClass("correct")
    }
    });


  $("#game1drop4").droppable ({
    accept: "#game1img4",
    drop: function(e,ui) {
      $(this).addClass("correct");
    }
    });

 function submit() { if ($("#game1drop1").hasClass("correct") && $("#game1drop2").hasClass("correct") && $("#game1drop3").hasClass("correct") && $("#game1drop4").hasClass("correct")) {
      $(".completion").css("visibility","visible");
  };
};
});

根据按钮单击按钮，更新可拖动背景

0 个答案: