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

Question

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

我的问题是我无法水平移动图像 (id) 框。我已经设法让它垂直工作，但是当我试图让它水平工作时，它不会工作。你可以移动图像，但你不能把它放在原地，当你用鼠标拿起它时，它会在距离鼠标光标大约 6 厘米的地方被拾起。

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

Fiddle here

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

jQuery Sortable Horizontal Using Different HTML Tags

html

css

jquery

jquery-ui

twitter-bootstrap