How to implement drag and drop elements in a slider?

Question

JavaScript

Hello! Please help me figure it out.

In my Django project, I have a Slider data model (see below). Based on this data model, I'm trying to create a slider. In appearance, it looks like a slider like on the djangopackages site.


The default sorting of model objects is by the idx field. In the interface itself, sorting should be implemented using drag and drop. The question is the following. Could you advise the options for solving the creation of such a slider. Where to dig? It looks like jQuery provides such an option, but I can't find more details. Whether the value of the idx field should change when the element is dragged. I would be grateful for any help!

models.py:

class Slider(models.Model):
    head = models.CharField(
        max_length=250,
        help_text='Заголовок',
        blank=False
    )

    body = models.TextField(
        help_text='Основной текст с описанием',
        blank=False
    )

    idx = models.IntegerField(
        help_text='Поле для сортировки',
        default=0,
    )

    class Meta:
        ordering = ['idx']