HTMX集成Sortable拖拽排序仅生效一次 渲染后失效修复

问题复现 #

• 参考BugBytes频道《Django and HTMX #6 构建可拖拽排序界面》上下两期教程开发可拖拽排序功能
• 完全按照教程配套开源仓库的示例编写models.py、views.py、urls.py、books.html、list_books.html等核心代码
• 异常表现：页面首次加载时拖拽排序功能完全正常，HTMX发送排序请求完成局部渲染后，拖拽功能直接失效，只有手动刷新全页面才能恢复单次可用
• 检索同类问题发现该问题属于HTMX+SortableJS组合的常见问题，但此前没有可直接落地的有效解决方案

问题原因 #

教程本身的示例代码存在疏漏：排序逻辑对应的sort视图，在完成列表项的排序顺序更新后，返回的是列表片段对应的局部模板list_books.html（教程原示例中对应为film-list.html）。这种返回方式会导致HTMX替换DOM节点后，SortableJS没有重新绑定到新渲染的可拖拽列表元素上，直接造成拖拽功能失效。

修复方案 #

调整sort视图的模板返回逻辑：

放弃返回局部列表模板，改为返回承载可拖拽列表的完整页面模板books.html（教程原示例中对应为films.html）

代码对比 #

错误写法（教程原写法）：

def sort(request):
    # 省略列表项顺序更新的业务逻辑
    updated_books = Book.objects.all()
    return render(request, "list_books.html", {"books": updated_books})

正确写法：

def sort(request):
    # 省略列表项顺序更新的业务逻辑
    updated_books = Book.objects.all()
    return render(request, "books.html", {"books": updated_books})

修改后多次触发拖拽排序、HTMX多次完成局部渲染的场景下，SortableJS都能正常绑定到列表元素，拖拽功能不会再异常失效。该方案可直接复用到所有参照该教程开发、遇到同类问题的场景，填补当前HTMX结合SortableJS开发相关实用参考不足的缺口。

内容的提问来源于stack exchange，提问作者user-polymetis