带有水平滚动的 JQuery UI 可排序正在向下移动所有元素答案

【问题标题】：JQuery UI Sortable with Horizontal Scrolling is shifting all elements down带有水平滚动的 JQuery UI 可排序正在向下移动所有元素
【发布时间】：2011-11-08 16:13:35
【问题描述】：

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

对象是其中包含 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'
  });
})

我尝试了很多不同的设置，并将其中一些设置为 cmets。

查看问题的最佳方法在这里：http://jsfiddle.net/francispotter/gtKtE/

【问题讨论】：

从stackoverflow.com/questions/2544143/…看jsfiddle.net/sP3UZ
@mlbase75 感谢您的回复，但这并不能解决问题。您提供的链接中的示例使用浮动，如果您希望对象形成平铺网格，这很好。我希望项目 only 水平排列，并让该区域向左/向右滚动以容纳项目。所以我需要使用 display:inline-block.
我一直在摆弄代码，据我所知，Sortable 从未被设计为水平使用。我认为在 DIV 顶部创建的间隙是某种不可见的占位符 DIV，如果不更改 jQuery UI 代码本身就无法删除它。另见bugs.jqueryui.com/ticket/6702

标签： jquery css jquery-ui

【解决方案1】：

一位同事提出的一个答案（不优雅，但有效）是在 item 上设置 float:left，然后：

$(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);
    }
  });
})

【讨论】：

【解决方案2】：

我知道这是一个迟到的答案，但我也遇到了问题。我的解决方法正在改变

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

到

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

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

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

【讨论】：

感谢您的回答。我已经离开了这个项目（只是把 bug 留在了那里）。这是一个应该提交给 JQuery 本身的补丁吗？
是的，我想这是补丁，因为我在水平和垂直排序中都尝试过。我也会将它发布在 jQuery UI 网站上。
您也可以使用“开始”回调，而不是更改源。 start: function(event, ui) { ui.placeholder.html('&nbsp;'); }。不要忘记将其附加到两个连接列表中。
嘘。不要修改核心文件！

【解决方案3】：

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

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

【讨论】：

我知道这是不久前的事了，但谢谢 - 这对我很有帮助为了说明你的意思（并证明它有效），这是 OP 的小提琴 jsfiddle.net/q4uze/3

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

这个答案无疑为时已晚，无法帮助您，但也许它会帮助处于相同情况的其他人。几天前我发现了你的问题，因为我正在尝试做同样的事情来允许用户重新排序“胶片”上的“照片”。对您的问题的评论建议使用“float”而不是“inline-block”，结果证明是找到解决方案的关键。这导致我使用固定大小的 DIV 来保存可排序的项目，避免由自动换行引起的高度变化，然后添加一个带有 overflow-x:scroll 的外部 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',
});

【讨论】：