title: how to reset draggables that have been set to disable to restart a game?
body: <p>Using Edge Animate.
  I have a game with a timer.
  The user has to drag n drop objects in a certain amount of time.
  I the user runs out of time, I want to reset everything.
  I disable the draggable when they are dropped in the correct place in the drop event.</p>
  
  <pre><code>ui.draggable.draggable('disable');
  </code></pre>
  
  <p>However, when I reset all the elements, in the console I get the infamous:</p>
  
  <pre><code>**Error: cannot call methods on draggable prior to initialization; attempted to call method 'enable'**
  </code></pre>
  
  <p>Basically if I do not add </p>
  
  <pre><code> sym.$(".set" + set).draggable( "enable" );
  </code></pre>
  
  <p>then the draggables are disabled.</p>
  
  <p>But if I do not disable them then it causes a lot a problem to track answers and scores.</p>
  
  <p>Any idea on how to prevent this?</p>
  
  <p>Is there some work around or am I resetting things wrong? Or do I need to re</p>
  
  <pre><code>for (j = 0; j &lt; 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 &lt; 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);
    }
  }
  </code></pre>
  
  <p>the code for the reset is the following. Redoing the draggables seems redundant. I tried with and without and still get the error message.</p>
  
  <pre><code>sym.$("startTimer").bind('click', function() {
   .... // some code before
    sym.$(".set" + set).show();
    for (j = 0; j &lt; logs1.length; j++) {
        sym.$(('.logs' + set) + j).draggable();   // draggables
        sym.$(".set" + set).draggable("enable");  // re-enable
    }
    timer = setInterval(function() {
      if (w &lt;= 180 &amp;&amp; w &gt; 0) {
        w = w - 3;
        sym.$("timer").css({
          "width": w
        });
        currentPos = (sym.$("water").offset().top) - 4;
        sym.$("water").animate({
          'top': currentPos
        });
      }
    }, 1000);
  });
  </code></pre>