jQuery可拖动小部件不与li在ul中工作

Question

也许我忽略了这一点，但我不明白为什么这不起作用。

我在jquery-ui创建一个可拖拽列表，使用从jquery-ui的可拖拽部件，但我似乎不能使li拖拽，我做错了什么?

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

非常感谢!

Answer 1

只需在脚本中添加以下代码:

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

Answer 2

需要jQuery-ui.js (https://code.jquery.com/ui/1.11.4/jquery-ui.js)

检查:

$(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

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