JQuery UI Sortable with Horizontal Scrolling is shifting all elements down

Question

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

The objects are boxes with HTML in them, including some text, not images like many of the other examples.

The problem is that as the user drags one of the objects, all the other ones shift downward during dragging.

Here's 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 lots of different settings, and left some of them in as comments.

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

Answer 1

A solution I found that works WITHOUT having to rewrite the ui library and is a clean and css fix:

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

Answer 2

This answer is undoubtably too late to help you, but perhaps it will help others in the same situation. I found your question a couple of days ago as I'm trying to do the same sort of thing to allow a user to reorder the "photos" on a "film strip". The comment on your question suggesting the use of "float" rather than "inline-block" turned out to be key in finding the solution. This led me to using a fixed-size DIV to hold the sortable items, avoiding the height change caused by word-wrapping, then adding an outer DIV with overflow-x:scroll to do the horizontal scrolling. Enjoy!

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