javascript - 如何重置已设置为禁用以重新启动游戏的可拖动对象？

Question

使用 Edge Animate。 我有一个带有计时器的游戏。 用户必须在一定时间内拖放n个对象。 如果用户没有时间，我想重置所有内容。 当它们在放置事件中放置在正确的位置时，我禁用可拖动。

ui.draggable.draggable('disable');

但是，当我重置所有元素时，在控制台中我得到了臭名昭著的信息:

**Error: cannot call methods on draggable prior to initialization; attempted to call method 'enable'**

基本上如果我不添加

 sym.$(".set" + set).draggable( "enable" );

然后可拖动对象被禁用。

但是如果我不禁用它们，那么跟踪答案和分数会导致很多问题。

知道如何防止这种情况吗？

是否有一些解决方法或者我重置错误？或者我需要重新

for (j = 0; j < logs1.length; j++) {
  sym.$(logs1[j]).addClass('logs1' + j);
  sym.$('.logs1' + j).draggable({
    zIndex: 1000,
    axis: "y",
    revert: function(obj) {
      if (obj === false) {
        sym.getSymbol("beaver").stop("stop3");
        return true;
      } else {
        return false;
      }
    },
    start: function(event, ui) {
      sym.$("water").show();
      startPos = $(this).offset().top;
      sym.getSymbol("beaver").stop("stop1");
    }
  });
  sym.$('.logs1' + j).droppable({
    drop: function(ui, event) {
      $(this).css({
        'top': startPos
      });
    }
  });
  sym.$(droppable[j]).droppable({
    accept: ".logs1" + j,
    drop: dropEvent
  });
}
K = 0;

function dropEvent(event, ui) {
  $(this).css({'border': '3px solid lime'});
  logDropFX.play();
  ui.draggable.draggable('disable');
  ui.draggable.position({ of: $(this),
    my: 'left top',
    at: 'left top'
  });
  waterRisingLoop.play();
  sym.getSymbol("beaver").stop("stop2");
  K++;
  sym.$("marker").animate({
    'top': 400 - (50 * K)
  }, 1000);
  var markerPos = sym.$("marker").offset().top;
  console.log("marker level: " + markerPos);
  if (markerPos < 250 || K == 5) {
    clearInterval(timer);
    done = false;
    setTimeout(function() {
      sym.$('levelScreen').animate({
        "top": 0,
        'z-index': 99999
      }, 1000);
      sym.$("level").attr('src', 'images/level1Complete.png');
      sym.$(".set1").hide();
      levelUpFX.play();
    }, 2000);
  }
}

重置代码如下。重做可拖动项似乎是多余的。我尝试过使用和不使用，但仍然收到错误消息。

sym.$("startTimer").bind('click', function() {
 .... // some code before
  sym.$(".set" + set).show();
  for (j = 0; j < logs1.length; j++) {
      sym.$(('.logs' + set) + j).draggable();   // draggables
      sym.$(".set" + set).draggable("enable");  // re-enable
  }
  timer = setInterval(function() {
    if (w <= 180 && w > 0) {
      w = w - 3;
      sym.$("timer").css({
        "width": w
      });
      currentPos = (sym.$("water").offset().top) - 4;
      sym.$("water").animate({
        'top': currentPos
      });
    }
  }, 1000);
});

Answer 1

好的。我找到了解决方案。我在放置事件反馈检查中重新启用了可拖动功能。所以现在我有(简化):

function dropEvent(event, ui) {
  ui.draggable.draggable('disable');
  ui.draggable.position({ of: $(this), my: 'left top',   at: 'left top'  });
  ui.draggable.addClass('done');
  K++;  
  if (markerPos < 250 || K == 5) {
    sym.$('.done').draggable('enable');    
  }
}