title: jQuery Sortable Horizontal Using Different HTML Tags
body: <p>This is what I currently have
  <a href="http://www.bootply.com/sfLr2AJ7EU" rel="nofollow">http://www.bootply.com/sfLr2AJ7EU</a></p>
  
  <p>My issue is that I cant move my image (id) boxes horizontally. I have managed to get it working vertically but when I try to get it working horizontally, it wont work. You can move the image but you cant drop it in place as well as when you pick it up with the mouse, it get picked up about 6 CM away from the mouse cursor.</p>
  
  <p>jQuery</p>
  
  <pre><code>   $(function () {
          $("#sortable").sortable({
              revert: true
          }); 
      });
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>ul.thumbnails {
    overflow: auto;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    padding: 0px;
    margin: 0px; }
    ul.thumbnails ul {
      overflow: auto;
      list-style-image: none;
      list-style-position: outside;
      list-style-type: none;
      padding: 0px;
      margin: 0px; }
    ul.thumbnails li.group_title {
      float: none; }
    ul.thumbnails li {
      margin: 0px 12px 12px 0px;
      float: left; }
      ul.thumbnails li .thumbnail {
        padding: 6px;
        border: 1px solid #dddddd;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none; }
        ul.thumbnails li .thumbnail img {
          -webkit-user-drag: none; }
      ul.thumbnails li .thumbnail.selected {
        background: #0088cc; }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;ul id="sortable" class="thumbnails"&gt;
      &lt;id id="output0"&gt;
          &lt;li&gt;
              &lt;div class="thumbnail selected"&gt;
                  &lt;img class="img-responsive" src="http://placehold.it/52&amp;amp;text=1" width="52" height="52"&gt;
              &lt;/div&gt;
          &lt;/li&gt;
      &lt;/id&gt;
      &lt;id id="output1"&gt;
          &lt;li&gt;
              &lt;div class="thumbnail"&gt;
                  &lt;img class="img-responsive" src="http://placehold.it/52&amp;amp;text=2" width="52" height="52"&gt;
              &lt;/div&gt;
          &lt;/li&gt;
      &lt;/id&gt;
      &lt;id id="output2"&gt;
          &lt;li&gt;
              &lt;div class="thumbnail"&gt;
                  &lt;img class="img-responsive" src="http://placehold.it/52&amp;amp;text=3" width="52" height="52"&gt;
              &lt;/div&gt;
          &lt;/li&gt;
      &lt;/id&gt;
      &lt;id id="output3"&gt;
          &lt;li&gt;
              &lt;div class="thumbnail"&gt;
                  &lt;img class="img-responsive" src="http://placehold.it/52&amp;amp;text=4" width="52" height="52"&gt;
              &lt;/div&gt;
          &lt;/li&gt;
      &lt;/id&gt;
  &lt;/ul&gt;
  </code></pre>