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

小提琴here

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

1 个答案: