CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-sortable
ssapp
ssapp

Reputation: 323

Jquery sortable not working properly

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

});

I can drag chapters, but they dont sort... and i can drop them anywhere on page which also sholudnt be happening. What am i doing wrong? TY

Upvotes: 0

Views: 3547

Answers (1)

T J
T J

Reputation: 43156

Remove the draggable() and droppable():

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

Upvotes: 1

Related Questions