jquery - jQuery UI可通过水平滚动进行排序将所有元素下移

我想允许用户使用滚动条从左到右对对象进行排序。

这些对象是带有HTML的框，其中包括一些文本，而不是像许多其他示例一样的图像。

问题在于，当用户拖动一个对象时，所有其他对象在拖动过程中都会向下移动。

这是我所拥有的:

HTML:

<div id="parent" class="parent">
  <div id="list" class="list">
    <div class="item">A</div>
    <div class="item">B</div>
    <div class="item">C</div>
  </div>
</div>

CSS:

.parent {
  height:64px;
  width:280px;
}
.list {
  background-color:#d0d0d0;
  white-space:nowrap;
  overflow-x:scroll;
  overflow-y:hidden;
  /*text-align:left;*/
}
.item {
  background-color:#404040;
  height:40px;
  width:100px;
  margin:4px;
  cursor:pointer;
  display:inline-block;
  /*float:left;*/
  /*float:none;*/
  /*clear:both;*/
}
.placeholder {
  height:40px;
  width:20px;
  display:inline-block;
  margin:4px;
}

Javascript:

$(function() {
  $('#list').disableSelection().sortable({
    scroll: true,
    placeholder: 'placeholder',
    //containment:'parent',
    axis: 'x'
  });
})

我尝试了许多不同的设置，并将其中一些保留为注释。

解决问题的最佳方法是在这里:http://jsfiddle.net/francispotter/gtKtE/

最佳答案

我发现一个无需重写ui库即可使用的解决方案，并且是一种简洁的CSS修复程序:

.ui-sortable-placeholder {
  display: inline-block;
height: 1px;
}