使用不同 HTML 标签的 jQuery 可水平排序

Question

这是我目前拥有的 http://www.bootply.com/sfLr2AJ7EU

我的问题是我无法水平移动我的图像 (id) 框。我已经设法让它垂直工作，但是当我试图让它水平工作时，它就不起作用了。您可以移动图像，但不能将其放置在适当的位置，当您用鼠标拾取时，它会在距离鼠标光标约 6 CM 处被拾起。

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

我想这就是你的意思，伙计。尝试替换

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

与

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

小提琴here