JQuery Sortable horizontal scrolling user interface shifts all items down

Question

I want to allow the user to sort objects from left to right with a scroll bar.

Objects are boxes with HTML in them, including some text, and not images, like many other examples.

The problem is that when the user drags one of the objects, all the others are moved down while dragging.

Here is what I have:

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

I tried many different settings and left some of them in the comments.

The best way to see the problem is here: http://jsfiddle.net/francispotter/gtKtE/

Answer 1

The solution I found works without having to rewrite the ui library and is clean and fixed css:

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

Answer 2

This answer is undoubtedly too late to help you, but perhaps it will help others in the same situation. I found your question a couple of days ago when I try to do the same so that the user can reorder the “photos” on the “movie strip”. Commenting on your question using a "float" rather than an "inline-block" turned out to be the key to finding a solution. This led me to use a fixed-size DIV to store sorted items, avoiding height changes caused by word wraps, then adding an external div with overflow-x: scroll to do horizontal scrolling. Enjoy it!

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

One answer (not elegant, but it works), suggested by a colleague, should set float: left on item, then:

 $(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

I know this is a rather late answer, but I also had problems with this. The fix for me was changing

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

to

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

on line 659 in the current uncompressed version (v1.8.17).

I hope this still helps you.

Answer 5

As @BertterHeide rightly commented, the appropriate solution for this problem is to modify your .sortable call by adding start: function(event, ui) { ui.placeholder.html(' '); } start: function(event, ui) { ui.placeholder.html(' '); } as follows:

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