title: Uncaught TypeError: .draggable is not a function(…)
body: <p>I don't know what is wrong here, it has already driven me nuts. Whenever I use some breakpoints on the code, as in the image, and reload the page then everything works fine. But if I close the developer tools and then I refresh, it throws me this error: 'Uncaught TypeError: $design[a].draggable is not a function(…)'.</p>
  
  <p>Following is my code and the images:</p>
  
  <p>Debugging image: </p>
  
  <p><a href="https://i.stack.imgur.com/3AUWe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3AUWe.png" alt="enter image description here"></a></p>
  
  <p>My script:</p>
  
  <pre><code>    var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      var $canvas = $("#canvas");
      var canvasOffset = $canvas.offset();
      var offsetX = canvasOffset.left;
      var offsetY = canvasOffset.top;
  
      var design = [];
      var $design = [];
      var pic = [];
  
      $.ajax({
        type: 'get',
        url: ('/getCustomizeParts'),
        data: {
        },
        success: function(data) {
          for (var a = 0; a &lt; data.length; a++) {
            design[a] = new Image();
            pic[a] = data[a].partimagePath;
            design[a].src = "images/part/" + pic[a];
            $design[a] = $("#design" + (a + 1));
            //here it threows me the error
            $design[a].draggable({
              helper: 'clone',
            });
            $design[a].data("image", design[a]);
          }
          $canvas.droppable({
            drop: dragDrop,
          });
        }
      });
  </code></pre>
  
  <p>I have included the script tags in my page in following order</p>
  
  <pre><code>&lt;script src="/Admin/js/jquery-2.2.3.min.js"&gt;&lt;/script&gt;
  &lt;script src="/Admin/js/jquery-ui.min.js"&gt;&lt;/script&gt;
  &lt;script src="/Admin/js/customizeScript.js"&gt;&lt;/script&gt;
  </code></pre>