title: Uncaught TypeError: $(...).draggable is not a function
body: <p>hello everyone i am trying to make some divs draggable and i have managed to do that with jquery-ui. i also have a script that removes 2 divs and combine them in a single one (like if they have been merged together) but when i call the draggable function on the new "merged" div i get the error is the title... so what is the problem ? how is it possible that .draggable function work one place and not in an other (on the same file)!!</p>
  
  <p>this is the draggable function:</p>
  
  <pre><code>function drag($class){
  $("."+$class).draggable({
  containment: ".tab-content",
  grid: [ 3, 3 ],
  zIndex:100,
  obstacle: "#nothere",
  preventCollision: true,
  drag:
  function(){
      $(".test").css("background-color","red");
      $(this).css("background-color","green");
      }
  
  });
  } 
  </code></pre>
  
  <p>first i called it for the test class which work perfectly with no error </p>
  
  <pre><code>drag("test");
  </code></pre>
  
  <p>but when i call it another time inside the merge function it return the error:
  Uncaught TypeError: $(...).draggable is not a function </p>
  
  <pre><code>drag("test:not(.ui-draggable)");
  </code></pre>
  
  <p>the js file are loaded properly: </p>
  
  <pre><code>&lt;script type="text/javascript" src="js/jquery-2.1.4.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/jquery-ui.min.js"&gt;&lt;/script&gt;
  </code></pre>