title: jQuery UI Draggable: Not working properly but copied?
body: <p>I wish to get a grasp on jQuery and jQuery UI. This stuff is cool and I may see its potential though I'm no king in javascript, far from it!</p>
  
  <p>I have written this piece of code in an HTML file written by hand for pedagogical purpose.</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;01 - jQuery UI Draggable Basic Example&lt;/title&gt;
      &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" /&gt;
      &lt;script src="http://code.jquery.com/jquery-1.8.2.js"&gt;&lt;/script&gt;
      &lt;script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"&gt;&lt;/script&gt;
      &lt;style&gt;
          .dragarea {
                  height: 500px;
                  width: 500px;
                  background: grey;
          }
  
          #draggable {
                  width: 100px;
                  height: 100px;
                  padding: 20px;
                  background: #ccc;
                  cursor: pointer;
          }
      &lt;/style&gt;
      &lt;script&gt;
          $(document).ready(function() { $( "#draggable" ).draggable(); });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="dragarea"&gt;
          &lt;div id="draggable"&gt;Drag me&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Yet, it's working properly when copied from this <a href="http://jqueryui.com/draggable/" rel="nofollow noreferrer">jQuery UI Draggable</a> website.</p>
  
  <p>I have also read this tutorial on <a href="http://www.ericbieller.com/2010/06/24/how-to-create-a-simple-drag-and-drop-with-jquery/" rel="nofollow noreferrer">How to create a simple drag and drop with jQuery</a>, plus plenty of other StackOverflow's Q/A's:</p>
  
  <ol>
  <li><a href="https://stackoverflow.com/questions/7159118/jquery-ui-draggable-not-working">jQuery UI Draggable Not Working</a></li>
  <li><a href="https://stackoverflow.com/questions/6144188/cant-get-jquery-draggable-plugin-to-work?rq=1">Can't get JQuery Draggable plugin to work?</a></li>
  </ol>
  
  <p>Just to name a few.</p>
  
  <p>When I say it doesn't work properly, I mean that I can see my two DIV sections on the screen with the correct styles, and I cannot drag the drag-able rectangle, it just selects the text and the page just like I was trying to copy the text. Here's the result on screen.</p>
  
  <p><img src="https://i.stack.imgur.com/1dYA6.png" alt="On-screen result of my code above"></p>
  
  <p>What's wrong with my code? Might someone please tell me?</p>
  
  <p>Thanks for your support! =)</p>