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