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

Answer 2

这个答案对于帮助你来说无疑是太迟了，但也许它会在同样的情况下帮助其他人。我几天前找到了你的问题，因为我正在尝试做同样的事情，允许用户重新排序“电影胶片”上的“照片”。关于你的问题的评论暗示使用“浮动”而不是“内联阻止”，这对于找到解决方案至关重要。这导致我使用固定大小的DIV来保存可排序的项目，避免由自动换行引起的高度变化，然后添加带有overflow-x的外部DIV：滚动以进行水平滚动。享受！

https://jsfiddle.net/kmbro/y8ccza34/

HTML

<div id='scrollable'>
<div id='sortable'>
<div class='item'>Block A</div>
<div class='item'>Block B</div>
<div class='item'>Block C</div>
<div class='item'>Block D</div>
</div>
</div>

CSS

#scrollable {
  overflow-x: scroll;
}

#sortable {
  border: dashed green;
  border-width: 6px 0;
  padding: 4px 0;
  background-color: yellow;
  height: 150px;
  width:calc(4 * 200px + 1px); // 1px for dragging
}

.item {
  float: left;
  height: 100%;
  width: 200px;
  box-sizing: border-box; /* keep padding/border inside height/width */
  border: solid green 4px;
  background-color: white;
}

jQuery 2.1.3 / jQuery UI 1.11.4

$('#sortable').sortable({
axis: 'x',
});

Answer 3

同事提出的一个答案（不优雅，但有效）是设置浮点数：左项目，然后：

$(function() {
  $('#list').disableSelection().sortable({
    scroll: true,
    axis: 'x',
    create: function(event, ui) {
        var $e = $(event.target);
        var width = 0;
        $e.children().each(function(){
            width += $(this).outerWidth(true);
        });
        $e.width(width);
    }
  });
})

Answer 4

我知道这是一个迟到的答案，但我也遇到了这个问题。对我的修复正在改变

.removeClass("ui-sortable-helper")[0];

到

.removeClass("ui-sortable-helper").html('&nbsp;')[0];

在当前未压缩版本（v1.8.17）的第659行。

我希望这仍然可以帮助你。

Answer 5

正如@BertterHeide正确评论的那样，此问题的正确解决方案是修改您的.sortable来电，添加start: function(event, ui) { ui.placeholder.html(' '); }，如下所示：

$(function() {
  $('#list').disableSelection().sortable({
    scroll: true,
    placeholder: 'placeholder',
    start: function(event, ui) { ui.placeholder.html('&nbsp;'),
    //containment:'parent',
    axis: 'x'
  });
})

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

5 个答案: