基于Django实现可自定义排序的数据区块布局是否可行？求方案

当然有人实现过这类自定义区块排序的功能，Django完全可以搞定这个需求，核心思路是存储每个用户的区块排序偏好，再根据偏好动态渲染页面布局。下面是具体的实现步骤：

1. 数据库设计：存储用户排序偏好 #

需要新增一个模型来保存每个用户的区块顺序，有两种常见方案：

• 方案一：用JSON字段存排序列表（推荐，更简洁）
  直接用JSONField存储区块ID的顺序数组，比如['block3', 'block1', 'block2']，适合区块数量固定的场景。
• 方案二：用关联表存单个区块的排序值
  每个区块对应一条记录，包含用户、区块ID、排序序号（整数），适合区块数量动态变化的场景。

这里给出方案一的模型示例：

from django.db import models
from django.contrib.auth.models import User
from django.db.models import JSONField

class UserBlockPreference(models.Model):
    user = models.OneToOneField(User, on_delete=models.CASCADE, related_name='block_preferences')
    block_order = JSONField(default=list, blank=True)

    def save(self, *args, **kwargs):
        # 新用户默认设置初始顺序
        if not self.block_order:
            self.block_order = ['block1', 'block2', 'block3']
        super().save(*args, **kwargs)

2. 后端逻辑：处理排序保存与渲染 #

保存用户调整后的排序 #

写一个视图接收前端传来的新顺序，更新数据库：

from django.http import JsonResponse
from django.contrib.auth.decorators import login_required
from .models import UserBlockPreference

@login_required
def save_block_order(request):
    if request.method == 'POST':
        new_order = request.POST.getlist('block_order[]')
        # 获取或创建用户的偏好记录
        pref, _ = UserBlockPreference.objects.get_or_create(user=request.user)
        pref.block_order = new_order
        pref.save()
        return JsonResponse({'status': 'success'})
    return JsonResponse({'status': 'error'}, status=400)

按用户偏好渲染页面 #

在页面视图中，先获取用户的排序偏好，再按顺序准备区块数据：

def dashboard(request):
    # 确定当前用户的区块排序
    if request.user.is_authenticated:
        pref, _ = UserBlockPreference.objects.get_or_create(user=request.user)
        block_order = pref.block_order
    else:
        block_order = ['block1', 'block2', 'block3']  # 未登录用户用默认顺序
    
    # 按排序顺序组装区块内容
    block_data = {
        'block1': '区块1的具体内容',
        'block2': '区块2的具体内容',
        'block3': '区块3的具体内容'
    }
    sorted_blocks = [{'id': bid, 'content': block_data[bid]} for bid in block_order]
    
    return render(request, 'dashboard.html', {'blocks': sorted_blocks})

3. 前端实现：拖拽排序与提交 #

用轻量的拖拽库（比如Sortable.js）实现可视化的排序交互，拖拽结束后把新顺序传给后端：

<!-- 模板页面中的区块容器 -->
<div id="block-container">
    {% for block in blocks %}
        <div class="block" data-block-id="{{ block.id }}">{{ block.content }}</div>
    {% endfor %}
</div>

<!-- 引入Sortable.js -->
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<script>
    const container = document.getElementById('block-container');
    new Sortable(container, {
        animation: 150,
        onEnd: () => {
            // 获取当前排序的区块ID列表
            const blockOrder = Array.from(container.children).map(el => el.dataset.blockId);
            // 发送POST请求保存排序
            fetch('/save-block-order/', {
                method: 'POST',
                headers: {
                    'X-CSRFToken': '{{ csrf_token }}',
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: new URLSearchParams({
                    'block_order[]': blockOrder
                })
            });
        }
    });
</script>

关键注意事项 #

• 确保给视图加上登录验证，避免未授权用户修改排序。
• 新用户首次访问时，自动创建默认排序记录，避免渲染出错。
• 如果区块内容是动态数据，在组装sorted_blocks时直接代入对应的数据即可。

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