jQuery Sortable Horizontal Using Different HTML Tags

Question

This is what I currently have http://www.bootply.com/sfLr2AJ7EU

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.

jQuery

   $(function () {
        $("#sortable").sortable({
            revert: true
        }); 
    });

CSS

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; }

HTML

<ul id="sortable" class="thumbnails">
    <id id="output0">
        <li>
            <div class="thumbnail selected">
                <img class="img-responsive" src="http://placehold.it/52&amp;text=1" width="52" height="52">
            </div>
        </li>
    </id>
    <id id="output1">
        <li>
            <div class="thumbnail">
                <img class="img-responsive" src="http://placehold.it/52&amp;text=2" width="52" height="52">
            </div>
        </li>
    </id>
    <id id="output2">
        <li>
            <div class="thumbnail">
                <img class="img-responsive" src="http://placehold.it/52&amp;text=3" width="52" height="52">
            </div>
        </li>
    </id>
    <id id="output3">
        <li>
            <div class="thumbnail">
                <img class="img-responsive" src="http://placehold.it/52&amp;text=4" width="52" height="52">
            </div>
        </li>
    </id>
</ul>

Answer 1

I think this is what u meant mate.. Try replacing

ul.thumbnails li {
    margin: 0px 12px 12px 0px;
    float: left; 
}

with

ul.thumbnails id {
    margin: 0px 12px 12px 0px;
    float: left;
}

Fiddle here