具有水平滚动的JQuery UI可排序正在将所有元素向下移动

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