JQuery UI Sortable with Horizontal Scrolling is shifting all elements down

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/

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

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

One answer (not elegant, but it works) proposed by a colleague is to 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);
    }
  });
})

I know this is kind of a late answer, but I have been having problems with this as well. The fix for me was changing

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

to

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

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

I hope this still helps you out.

As @BertterHeide so rightly commented, the proper solution to this issue is to modify your .sortable call, adding 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'
  });
})