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