Jquery sortable 无法正常工作

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