JQuery UI Sortable with Horizo​​ntal Scrolling 将所有元素向下移动

Question

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

对象是其中包含 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/

Answer 1

我发现一个解决方案无需重写 ui 库即可工作，并且是一个干净的 css 修复:

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