我们刚刚为一个项目做了类似的事情，在这个项目中，您可以通过使用拖放命令对备选方案进行排序。我们使用了Django的Formsets和SortableJS/Sortable库。
我们实现中的主要概念是这样的：
一个表单包含所有的块，每个块包含一个隐藏的输入字段。隐藏的输入具有唯一的id和名称（两者都与块/备选项相关）以及表示块在排名中的位置的值。然后，当一个块被移动时，一些JavaScript代码会更新所有隐藏字段的值，以反映新的位置。在页面的底部有一个提交表单的按钮，接收表单的视图使用隐藏输入的名称和值来查找每个块的新位置。
这些是我们的代码的一些片段，它们应该有助于给予您了解我们如何解决这个问题。我试着把所有不必要的部分都去掉。由于我们使用了表单集，HTML可能不是很清楚。

HTML

<form method="post">
   {% csrf_token %}
   {{ form.management_form }}
   <div>
       <ol class="list-group list-group-numbered" id="items">
       {% for f in form %}
           <li>
               <div>
                   {{ f.order.label }}
                   {{ f.order }}
               </div>
           </li>
       {% endfor %}
       </ol>
   </div>

   {% include "polls/includes/alert-non-modify.html"%}

   <button type="submit" class="btn btn-primary">Save</button>
</form>

Javascript

<script src="{% static 'js/plugins/Sortable.min.js' %}"></script>
<script type="text/javascript">
    const alternatives = document.getElementById('items');

    // Set the index of each item
    const setIndex = arr => arr.forEach((item, index) => {
        const input = item.getElementsByTagName('input')[0];
        input.value = index + 1;
    })

    // Set the index of each item on load
    setIndex([...alternatives.children])
    Sortable.create(alternatives, {
        animation: 150,
        ghostClass: 'blue-background-class',
        chosenClass: 'blue-background-class',
        dragClass: 'blue-background-class',

        onEnd: (/**Event*/evt) => {
            setIndex([...alternatives.children])
        },
    });
</script>

这是在前端生成的HTML，所以你可以看到我们的Django模板生成的代码是什么样子的。请注意，有很多东西是特定于我们的应用程序的。

<form method="post">
    <input type="hidden" name="csrfmiddlewaretoken" value="...">
    <input type="hidden" name="shultzeopinionjudgement_set-TOTAL_FORMS" value="5" id="id_shultzeopinionjudgement_set-TOTAL_FORMS"><input type="hidden" name="shultzeopinionjudgement_set-INITIAL_FORMS" value="0" id="id_shultzeopinionjudgement_set-INITIAL_FORMS"><input type="hidden" name="shultzeopinionjudgement_set-MIN_NUM_FORMS" value="5" id="id_shultzeopinionjudgement_set-MIN_NUM_FORMS"><input type="hidden" name="shultzeopinionjudgement_set-MAX_NUM_FORMS" value="5" id="id_shultzeopinionjudgement_set-MAX_NUM_FORMS">
    <div class="card">
        <div class="card-body">
            <ol class="list-group list-group-numbered gap-2" id="items">
            
                <li class="list-group-item d-flex justify-content-between align-items-start p-4 border border-primary">
                    <div class="ms-2 me-auto">
                        Alternativa uno
                        <input type="hidden" name="shultzeopinionjudgement_set-0-order" id="id_shultzeopinionjudgement_set-0-order" value="1">
                    </div>
                </li>
            
                <li class="list-group-item d-flex justify-content-between align-items-start p-4 border border-primary">
                    <div class="ms-2 me-auto">
                        Alternativa due
                        <input type="hidden" name="shultzeopinionjudgement_set-1-order" id="id_shultzeopinionjudgement_set-1-order" value="2">
                    </div>
                </li>
            
                <li class="list-group-item d-flex justify-content-between align-items-start p-4 border border-primary">
                    <div class="ms-2 me-auto">
                        Alternativa tre
                        <input type="hidden" name="shultzeopinionjudgement_set-2-order" id="id_shultzeopinionjudgement_set-2-order" value="3">
                    </div>
                </li>
            
                <li class="list-group-item d-flex justify-content-between align-items-start p-4 border border-primary">
                    <div class="ms-2 me-auto">
                        Alternativa quattro
                        <input type="hidden" name="shultzeopinionjudgement_set-3-order" id="id_shultzeopinionjudgement_set-3-order" value="4">
                    </div>
                </li>
            
                <li class="list-group-item d-flex justify-content-between align-items-start p-4 border border-primary">
                    <div class="ms-2 me-auto">
                        Alternativa cinque
                        <input type="hidden" name="shultzeopinionjudgement_set-4-order" id="id_shultzeopinionjudgement_set-4-order" value="5">
                    </div>
                </li>
            
            </ol>
        </div>
    </div>

    

    
    <div class="col-sm-12">
        <button type="submit" class="btn btn-primary">Salva</button>
    </div>
</form>