我正在尝试使用 SortableJS 和 htmx 实现拖放可排序列表。我让它工作了一次,但是在拖放第一个元素(以及重新渲染的部分)之后,我不能再使用拖放功能。当未重新渲染部分时,拖放功能按预期工作。我已经尝试使用htmx.on("htmx:load",...
以及将脚本放在部分中。
我使用 diff 来检查渲染部分之前和之后的 html 之间的差异,据我所知,重新排序列表之外的唯一区别是 csrf 令牌。
任何帮助,将不胜感激!
从views.py:
def sort(request):
event_pks_order = request.POST.getlist('event_order')
events=[]
for idx,event_pk in enumerate(event_pks_order,start=1):
event = Event.objects.get(pk=event_pk)
event.event_number = idx
event.save()
events.append(event)
return render(request,'timing/partials/eventlist.html',{'events':events})
来自 eventlist.html:
<form class="sortable list-group" hx-trigger="end" hx-post="{% url 'sort' %}" hx-target="#event-list">
{% csrf_token %}
<div class="htmx-indicator">Updating...</div>
{% for event in events %}
<div>
<input type="hidden" name="event_order" value="{{event.pk}}"/>
<li class="list-group-item">{{event.event_number}} {{event.event_name}}
</li>
</div>
{% endfor %}
</form>
来自 base.html:
<script>
document.body.addEventListener('htmx:configRequest', (event) => {
event.detail.headers['X-CSRFToken'] = '{{ csrf_token }}';
})
htmx.onLoad(function(content) {
var sortables = content.querySelectorAll(".sortable");
for (var i = 0; i < sortables.length; i++) {
var sortable = sortables[i];
new Sortable(sortable, {
animation: 150,
ghostClass: 'blue-background-class'
});
}
})
</script>