CODEWITHSUNDEEP
javascriptjqueryjquery-ui
jmargolisvt
jmargolisvt

Reputation: 6088

JQuery UI sortable adds an element?

I'm trying to use JQuery UI's drag/drop with sortable. When you sort the elements in a "drop zone", it appears to add another (null) element.

HTML 

<ul id="sortable" class="drop">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

JS

$("#sortable").sortable();

$( '.drop' ).droppable({
  drop: function (event, ui) {
    document.getElementById('length').innerHTML = document.querySelectorAll('#sortable li').length;
  }
});

You can try it out here: https://jsfiddle.net/udj6p93f/2/

Go ahead and sort the elements and you'll that length becomes 6, even though there are only 5 elements. What's going on here?

Upvotes: 0

Views: 155

Answers (1)

hisener
hisener

Reputation: 1491

I have copied this line 

document.getElementById('length').innerHTML = document.querySelectorAll('#sortable li').length;

just after

$("#sortable").sortable();

It's 5. And inspected element, drag and drop 1 element. It adds one more list item.

<li class="ui-sortable-placeholder ui-sortable-handle" style="visibility: hidden;"></li>

enter image description here

I think that happens because of this.

Fix suggestion:

$("#sortable").sortable();

$( '.drop' ).droppable({
  drop: function (event, ui) {
    document.getElementById('length').innerHTML = document.querySelectorAll('#sortable li').length - document.querySelectorAll('#sortable li.ui-sortable-placeholder').length;
  }
});

Upvotes: 1

Related Questions