Wrong sort position when use draggable class

[rottmann]

jsbin not work, so i post it quickly here:

<tr id="list">
  <th class="fixed">a</th>
  <th class="draggable">b</th>
  <th class="draggable">c</th>
  <th class="draggable">d</th>
  <th class="draggable">e</th>
  <th class="draggable">f</th>
</tr>

var el = document.getElementById('list');
var sortable = Sortable.create(el, {
    draggable: '.draggable',
    preventOnFilter: false
);

When drag e after f onSort show me: newIndex 4 oldIndex 3

and the result is:

<tr>
  <th class="fixed">a</th>
  <th class="draggable">b</th>
  <th class="draggable">c</th>
  <th class="draggable">e</th> <<--- wrong
  <th class="draggable">d</th>
  <th class="draggable">f</th>
</tr>

[gulazaro94]

I am also with this trouble. Has someone a workaround for it?

[gulazaro94]

@rottmann, my friend, I found a workaround, use the option filter instead of draggable and pass the string .fixed instead of .draggable

[rottmann]

@gulazaro94 thank you, i will try it!

[shawnwallace]

Also having the same issue.

[drewlarsen]

The above work-around did not work for me, I had to rely on a little jquery / DOM inspection to get the correct order when an element was dropped into a list:

in the onAdd function:

var el = $(event.item); // the dropped element
event.newIndex; // incorrect index returned
el.parent().children().toArray().indexOf(el[0]); // correct index returned

[owen-m1]

Could you provide a JSBin with this issue? I cannot reproduce.

[rathboma]

I am also having this issue. I have a child with class of .not-sortable which is filtered out using filter for the sortablejs options.

newIndex includes the filtered item. I'll reproduce for you in a JSBin

[rathboma]

Ok my issue was having an empty state list item that I hid once you'd dragged/dropped anything into that list. This empty state div was being used in calculating the position, even when hidden.

I made positions consistent with this in the onMove function:

    // prevent it from being added BEFORE the 'empty' state thing.
    if (event.related.classList.contains("not-sortable")) {
      return 1
    }