title: Drag and Drop working in online but not locally?
body: <p>Kindly see this fiddle: <a href="http://jsfiddle.net/hvncN/" rel="nofollow">http://jsfiddle.net/hvncN/</a>
  This <strong>fiddle</strong> implements a simple <strong>Drag and Drop</strong> list and is working fine.</p>
  
  <p>And also when I run the same code using a <strong>Wamp Server</strong> localhost, it is working fine.
  But anyhow, when I try to do it locally in my laptop (without <strong>wamp server</strong>), I am not able to do it.</p>
  
  <p>So, here is the code:</p>
  
  <pre><code>&lt;HTML&gt;
  &lt;HEAD&gt;
  &lt;/HEAD&gt;
  &lt;BODY&gt;
  
  
  
  &lt;section id="demos"&gt;
      &lt;h1&gt;Demos&lt;/h1&gt;
      &lt;style&gt;
          #demos section {
              overflow: hidden;
          }
          .sortable {
              width: 310px;
              -webkit-user-select: none;
              -moz-user-select: none;
              -ms-user-select: none;
              user-select: none;
          }
          .sortable.grid {
              overflow: hidden;
          }
          .sortable li {
              list-style: none;
              border: 1px solid #CCC;
              background: #F6F6F6;
              color: #1C94C4;
              margin: 5px;
              padding: 5px;
              height: 22px;
          }
          .sortable.grid li {
              line-height: 80px;
              float: left;
              width: 80px;
              height: 80px;
              text-align: center;
          }
          .handle {
              cursor: move;
          }
          .sortable.connected {
              width: 200px;
              min-height: 100px;
              float: left;
          }
          li.disabled {
              opacity: 0.5;
          }
          li.highlight {
              background: #FEE25F;
          }
          li.sortable-placeholder {
              border: 1px dashed #CCC;
              background: none;
          }
      &lt;/style&gt;
  
      &lt;section&gt;
          &lt;h1&gt;Sortable List&lt;/h1&gt;
          &lt;ul id="sortable1" class="sortable list"&gt;
              &lt;li draggable="true" class style="display: list-item;"&gt;Item 1
              &lt;li draggable="true" class style="display: list-item;"&gt;Item 2
              &lt;li draggable="true"&gt;Item 3
              &lt;li draggable="true"&gt;Item 4
              &lt;li draggable="true"&gt;Item 5
              &lt;li draggable="true"&gt;Item 6
          &lt;/ul&gt;
      &lt;/section&gt;
  &lt;/section&gt;
  &lt;script src="/html5sortable/jquery-1.7.1.min.js"&gt;&lt;/script&gt;
      &lt;script src="/html5sortable/jquery.sortable.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          $(function() {
              $('#sortable1, #sortable2').sortable();
              $('#sortable3').sortable({
                  items: ':not(.disabled)'
              });
              $('#sortable-with-handles').sortable({
                  handle: '.handle'
              });
              $('#sortable4, #sortable5').sortable({
                  connectWith: '.connected'
              });
          });
      &lt;/script&gt;
  &lt;/BODY&gt;
  &lt;/HTML&gt;
  </code></pre>
  
  <p>And here is the error in the console log:</p>
  
  <pre><code>Failed to load resource file:///C:/html5sortable/jquery-1.7.1.min.js
  Failed to load resource file:///C:/html5sortable/jquery.sortable.js
  Uncaught ReferenceError: $ is not defined 
  </code></pre>
  
  <p>Why is the code working properly on <strong>Fiddle</strong> and <strong>Wamp Server</strong> but not when opened Seperately as <code>file:///C:/wamp/www/test.html</code></p>
  
  <p>I want it to be able to work completely offline, without <strong>Wamp Server</strong> because I am later going to put all these files into one <strong>Hybrid Android App</strong> which is supposed to be working offline. What so I do to have it work offline?</p>