Как осуществить сортировку списка перетаскиванием в Джанго?

Question

[nurzhannogerbek]

Здравствуйте! Помогите пожалуйста разобраться.

В своем Джанго проекте я на страницу вывожу список книг. У модели данных Book есть поле position, по которой ведется сортировка. Необходимо дать возможность пользователю отсортировать список с помощью перетаскивания. Вопрос в следующем. Кто-нибудь сталкивался с подобной задачей?

Я нашел в JQuery UI раздел sortable, но не совсем понимаю как это связать с Джанго, чтобы при перетаскивании менялось значение поля position и сохранялось в БД. Помогите пожалуйста разобраться и направить на верный путь. На данный момент все работает только на frontend-e.

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>

JS:
$( "#books" ).sortable();

Answer 1

[Ильяс]

по-моему не очень хорошая идея сохранять данные сортировки книг в БД. Ведь один пользователь может отсортировать так, а другой иначе и судя по Вашей модели, для любого пользователя будет выводиться последняя сортировка, такие вещи надо сохранять у самого пользователя, в cookie, например

Comments

[nurzhannogerbek]

Здравствуйте! Не хотелось бы вдоваться во все подробности. Ваше идея отчасти правильная, но в моем конкртном проекте этого не нужно делать. Нужно как раз чтобы отсортированный одним пользователем список, был доступен другому. Есть ли у вас идеи по этому поводу?

[Ильяс]

NogerbekNurzhan: хорошо, тогда могу посоветовать использовать библиотеку django-orderable, надо будет наследовать модель не от models.Model, а от Orderable, к модели будет добавлено доп. поле в БД sort_order, по нему и будет осуществляться сортировка

[nurzhannogerbek]

Ильяс: Я кратко просмотрел данную библиотеку и мне кажется ее можно использовать только в админке. Хотя могу ошибаться. Ее можно использовать за приделами админки?

Answer 2

[kulaeff]

У плагина sortable есть событие update, которое вызывается каждый раз, когда юзер перетащил элемент на новое место. Подробнее тут api.jqueryui.com/sortable/#event-update. Таким образом, делается как-то так:

$( "#books" ).sortable({
  update: function( event, ui ) {
    // В ui содержится вся необходимая инфа о новой позиции перемещенного элемента
    // которую вы можете сохранить в БД аякс-запросом
  }
});

Comments

[nurzhannogerbek]

Здравствуйте! Я вот тоже заметил это событие update и начал писать так (см. ниже), но не пойму как передать url в ajax и не совсем понимаю как должна выглядеть вьюха. Можете пожалуйста взглянуть и сказать куда дальше копать или вообще не правильно делаю. Хотелось бы узнать ваше мнение.

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()