具有水平滚动的JQuery UI可排序正在将所有元素向下移动
我想允许用户使用滚动条从左到右对对象进行排序。
对象是包含HTML的框，包括一些文本，而不是像许多其他示例那样的图像。
问题在于，当用户拖动其中一个对象时，所有其他对象在拖动过程中向下移动。
这就是我所拥有的：
HTML：
A B C 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; }
这个答案对于帮助你来说无疑是太晚了，但也许它会在同样的情况下帮助其他人。 几天前我发现了你的问题，因为我正在尝试做同样的事情，允许用户重新排序“电影胶片”上的“照片”。 对你的问题的评论建议使用“浮动”而不是“内联阻止”，这对于找到解决方案至关重要。 这导致我使用固定大小的DIV来保存可排序的项目，避免由自动换行引起的高度变化，然后添加带有overflow-x的外部DIV：滚动以进行水平滚动。 请享用！
https://jsfiddle.net/kmbro/y8ccza34/
HTML
Block A Block B Block C Block D
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', });
同事提出的一个答案（不优雅，但它有效）是将float：left设置为item，然后：
$(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); } }); })
我知道这是一个迟到的答案，但我也遇到过这个问题。 对我的修复正在改变
.removeClass("ui-sortable-helper")[0];
至
.removeClass("ui-sortable-helper").html(' ')[0];
在当前未压缩版本的第659行（v1.8.17）。
我希望这仍然可以帮助你。
正如@BertterHeide所说的那样， 正确解决这个问题的方法是修改你的.sortable调用，添加start: function(event, ui) { ui.placeholder.html(' '); } 如下：
$(function() { $('#list').disableSelection().sortable({ scroll: true, placeholder: 'placeholder', start: function(event, ui) { ui.placeholder.html(' '), //containment:'parent', axis: 'x' }); })