jQuery Draggable widget not working with li inside a ul

Question

Maybe am overlooking this, but I can't figure why this is not working.

I'm creating a draggable list in jquery-ui, using the draggable widged from jquery-ui, but I can't seem to be able to make the li draggables, what am doing wrong?

HTML:

<section>
  <ul id="sortable1">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
    <li>item 6</li>
    <li>item 7</li>
    <li>item 8</li>
    <li>item 9</li>
    <li>item 10</li>
  </ul>
</section>

jQuery:

$('#sortable1 li').draggable({
  containment: 'section',
  cursor: 'move',
  revert: true
});

Thanks a lot!

Answer 1

Just add following code to script.

$( "ul, li" ).disableSelection();

Example

Answer 2

You need jQuery-ui.js (https://code.jquery.com/ui/1.11.4/jquery-ui.js)

Check this:

$(function() {
  $('#sortable1 li').draggable({
    containment: 'section',
    cursor: 'move',
    revert: true
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<section>
  <ul id="sortable1">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
    <li>item 6</li>
    <li>item 7</li>
    <li>item 8</li>
    <li>item 9</li>
    <li>item 10</li>
  </ul>
</section>

Answer 3

似乎错误在我项目的其他地方，我创建了一个测试项目，它起作用，道歉，我的错误。