如何在Django自定义CMS中实现可拖拽菜单并保存排序至数据库？

要实现拖拽排序后的顺序保存到数据库，需要前端传递排序后的区块ID列表，后端接收后更新对应数据的排序字段，分以下几步操作：

1. 给HTML区块添加唯一标识 #

每个区块需要绑定数据库中对应的记录ID，方便后端识别：

<div class="col-sm-8 column draggable-blocks">
  <!-- 给每个block添加data-id，值为数据库中该区块的ID -->
  <div class="block" data-id="{{ block.id }}">
    <div class="block-title">
      <h2>Block #1</h2>
    </div>
    <p>...</p>
  </div>

  <div class="block" data-id="{{ block.id }}">
    <div class="block-title">
      <h2>Block #2</h2>
    </div>
    <p>...</p>
  </div>
</div>

2. 修改jQuery代码，发送排序数据到后端 #

在Sortable的配置中添加update事件，获取排序后的ID序列，通过AJAX发送到Django接口：

var UiDraggable = function() {
    return {
        init: function() {
            $('.draggable-blocks').sortable({
                connectWith: '.block',
                items: '.block',
                opacity: 0.75,
                handle: '.block-title',
                placeholder: 'draggable-placeholder',
                tolerance: 'pointer',
                start: function(e, ui){
                    ui.placeholder.css('height', ui.item.outerHeight());
                },
                // 排序完成后触发
                update: function(event, ui) {
                    // 获取排序后的所有区块ID
                    var blockIds = $(this).sortable('toArray', {attribute: 'data-id'});
                    // 发送AJAX请求
                    $.ajax({
                        url: '/save-block-order/', // 后端接口URL
                        type: 'POST',
                        data: {
                            'block_order': blockIds,
                            'csrfmiddlewaretoken': '{{ csrf_token }}' // Django CSRF令牌
                        },
                        success: function(response) {
                            console.log('排序保存成功');
                        },
                        error: function(xhr) {
                            console.error('排序保存失败');
                        }
                    });
                }
            });
        }
    };
}();

3. 准备Django模型（确保有排序字段） #

你的Block模型需要添加一个用于存储排序顺序的字段，比如order：

from django.db import models

class Block(models.Model):
    title = models.CharField(max_length=255)
    content = models.TextField()
    order = models.IntegerField(default=0) # 排序字段

    class Meta:
        ordering = ['order'] # 默认按order字段排序

4. 编写Django视图处理排序保存 #

在views.py中编写视图函数，接收前端传来的排序数据，更新每个Block的order值：

from django.http import JsonResponse
from django.views.decorators.http import require_POST
from .models import Block

@require_POST
def save_block_order(request):
    block_order = request.POST.getlist('block_order[]') # 获取排序后的ID列表
    for index, block_id in enumerate(block_order):
        try:
            block = Block.objects.get(id=block_id)
            block.order = index
            block.save()
        except Block.DoesNotExist:
            continue
    return JsonResponse({'status': 'success'})

5. 配置URL路由 #

在urls.py中添加对应的路由：

from django.urls import path
from . import views

urlpatterns = [
    # 其他路由...
    path('save-block-order/', views.save_block_order, name='save_block_order'),
]

这样，当用户拖拽完成区块排序后，前端会自动把新的顺序发送到后端，后端更新数据库中的order字段，后续页面渲染时按order字段排序即可展示最新的区块顺序。

内容的提问来源于stack exchange，提问作者Silent