javascript - Sortable JS 在 htmx 渲染部分时中断

Question

我正在尝试使用 SortableJS 和 htmx 实现拖放可排序列表。我让它工作一次，但是在拖放第一个元素(以及重新渲染的部分)之后，我无法再使用拖放功能。当部分未重新渲染时，拖放功能将按预期工作。我尝试过使用 htmx.on("htmx:load",... 以及将脚本放入部分中。

我使用 diff 来检查部分渲染之前和之后 html 之间的差异，据我所知，重新排序列表之外的唯一差异是 csrf token 。

如有任何帮助，我们将不胜感激!

来自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>

Answer 1

我遇到了同样的问题，直到我在 HTMX 不和谐中发现了一篇带有修复的帖子。

在 HTMX 加载脚本中将 content.querySelectorAll 更改为 document.querySelectorAll。

htmx.onLoad(function(content) {
    var sortables = document.querySelectorAll(".sortable");
    for (var i = 0; i < sortables.length; i++) {
      var sortable = sortables[i];
      console.log(sortable);
      new Sortable(sortable, {
          animation: 150,
          ghostClass: 'blue-background-class'
      });
    }
});