Jquery可排序不正常

Question

<div id="chapters">

{% for chapter in chapters %}
    <div id="chapter-{{ forloop.counter }}">
        <legend>Chapter{{ forloop.counter }}</legend>
        <label for="id_subtitle">Subtitle:</label>
        <input id="id_subtitle" maxlength="255" name="subtitle" type="text" value="{{chapter.subtitle}} ">
        <label for="id_content">Content:</label>
        <input id="id_content" maxlength="255" name="content" type="text" value="{{chapter.content}} ">
        <label for="id_upload">File:</label>
        <a href="/media/{{chapter.upload}}">view</a>
          <a class="btn btn-primary" href="{% url "chapters-edit" pk=chapter.pk %}">Edit chapter</a>
    </div>
{% endfor %}
</div>
$(function() {
$('[id^="chapter-"]').draggable({
  // appendTo: "body",
  // helper: "clone"
});
$("#chapters").droppable({
  activeClass: "ui-state-default",
  hoverClass: "ui-state-hover",
  drop: function( event, ui ) {
  }

}).sortable({
    placeholder: "ui-state-highlight",
    helper:'clone',
    stop: function(e, ui) {
    console.log($('#sortable').sortable('toArray'));
    }
 });

}）;

我可以拖动章节，但是他们不排序......我可以将它们放在页面上的任何地方，这也会发生。我究竟做错了什么？ TY

Answer 1

删除draggable()和droppable()：

$(function() {
  $("#chapters").sortable({
    placeholder: "ui-state-highlight",
    helper: 'clone',
    stop: function(e, ui) {
      console.log($('#sortable').sortable('toArray'));
    }
  });
});