在 Django 中通过拖放对项目进行排序

Question

In my django project I show a list of books in template. Book model has position field which I use to sort books.

I'm trying to sort this list by drag and drop list items but my next code dont work well. I use JQuery UI . It works in frontend but dont change position field`s value when user drag and drop list item. Can someone help me to improve my js and view code. I am comfused. I would be grateful for any help.

models.py:

class Book(models.Model):
    title = models.CharField(max_length=200, help_text='Заголовок', blank=False)
    position = models.IntegerField(help_text='Поле для сортировки', default=0, blank=True)

    class Meta:
        ordering = ['position', 'pk']

html:

<div id="books" class="list-group">
{% for book in books %}
  <div class="panel panel-default list-group-item ui-state-default">
    <div class="panel-body">{{ book.title }}</div>
  </div>
{% endfor %}
</div>

urls.py:

url(r'^book/(?P<pk>\d+)/sorting/$',
     BookSortingView.as_view(),
     name='book_sorting')

JS:

$("#books").sortable({
      update: function(event, ui) {
            var information = $('#books').sortable('serialize');
            $.ajax({
                  url: "???",
                  type: "post",
                  data: information
            });
      },
}).disableSelection();

views.py:

class BookSortingView(View):
    @method_decorator(csrf_exempt)
    def dispatch(self, request, *args, **kwargs):
        return super(BookSortingView, self).dispatch(request, *args, **kwargs)

    def post(self, request, pk, *args, **kwargs):
        for index, pk in enumerate(request.POST.getlist('book[]')):
            book = get_object_or_404(Book, pk=pk)
            book.position = index
            book.save()
        return HttpResponse()

Answer 1

This is working for me!!

JS

  <script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
        $("tbody").sortable({
         update: function(event, ui) {
            sort =[];
            window.CSRF_TOKEN = "{{ csrf_token }}";
            $("tbody").children().each(function(){
                sort.push({'pk':$(this).data('pk'),'order':$(this).index()})

        });


        $.ajax({
          url: "{% url "book-sort" %}
",
          type: "post",
          datatype:'json',
          data:{'sort':JSON.stringify(sort),
           'csrfmiddlewaretoken': window.CSRF_TOKEN
          },

        });
         console.log(sort)
          },
        }).disableSelection();
      });

HTML

<table class="table table-hover" id="sortable" style="">
    <thead>
        <tr>
            <th></th>
            <th>Name</th>

    </thead>
    <tbody id="#Table">
        {% for book in books %}

        <tr data-pk="{{ book.id }}" class="ui-state-default" style="cursor: move;" data-placement="left"  title="Customize the order by drag and drop">
        <td> <a>{{ book.name }}</a> </td>


        {% endfor %}
    </tbody>
    </table>

view

@csrf_exempt
def sort(self):
    books = json.loads(self.request.POST.get('sort'))
    for b in books:
        book = get_object_or_404(Book, pk=int(b['pk']))
        book.position = b['order']
        book.save()
    return HttpResponse('saved')

and also change the query_set in your listview to get the books in that order

 books = Book.objects.all().order_by('position')