jQuery Sortable Items Float Right Sorting Not smooth Issue

Question

jQuery Sortable dragging is not working smooth when items are float right. I try to fix it without success and I don't understand why it is an issue.

To reproduce and understand the issue, you need to try dragging the items and you will see that sometimes you like to place an item at a place and the placeholder is stays at another place. see the attached image to understand better.

When removing the float:right property it will work good.

Note: Its a little hard to understand the issue, I reproduce it on jsfiddle but you need to play with it to understand it

https://jsfiddle.net/royshoa/4Lprn9bs/72

I will be happy to get some answers for that.

Answer 1

It looks like that the float to right inside the #sortable is messing up the behavior of jquery-ui-sortable.

to remain your reverse order (3,2,1) AND align it to the right AND keep the desired functionality working as you described:

• take out the float:right from #sortable and place it at the parent .example-box: now the parent's container floats to the right, but it does not affect #sortable

• to get the reverse 3, 2, 1 order, you only have to reverse the
  elements order within your jQuery code using get().reverse() . Doing so the order is now not influencing the jquery-ui-sortable anymore as no further float:right is used

html:

<div class="example-box">
  <ul id="sortable">
    <li class="ui-state-default">1</li>
    <li class="ui-state-default">2</li>
    <li class="ui-state-default">3</li>
  </ul>
</div>

css:

.example-box {
  margin: 50px;
  border: 1px solid navy;
  float: right;
}

#sortable {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#sortable li {
  margin: 3px 3px 3px 0;
  padding: 1px;
  width: 120px;
  height: 120px;
  font-size: 4em;
  text-align: center;
  float: left;
}

#sortable li {}

.draggable-placeholder {
  border: 2px dashed #D9D9D9 !important;
  background-color: #F7F7F7 !important;
}

jQuery:

jQuery(function($) {

  $('#sortable').sortable({
    opacity: 0.8,
    revert: true,
    forceHelperSize: true,
    forcePlaceholderSize: true,
    placeholder: 'draggable-placeholder',
    tolerance: 'pointer',
    axis: 'x'
  });

  var list = $('ul#sortable');
  var listItems = list.children('#sortable>li');
  list.append(listItems.get().reverse());

});

here is a working jsfiddle: https://jsfiddle.net/n7b9wezj/3/

note: I've set axis:x, because it shows the functionality nicer, but you don't need to set it. The blue border is only to illustrate the position of the div...

edit to reflect on comments here is another example using flexbox: https://jsfiddle.net/y9qd08bn/1/ I've set the width to 90%, so it looks better in the fiddle, but you can use it with 100%.