可排序的 JS 在 htmx 呈现部分时中断

Posted 2023-05-07

【中文标题】可排序的 JS 在 htmx 呈现部分时中断

【英文标题】：Sortable JS breaks upon htmx rendering a partial

【发布时间】：2022-01-16 14:53:37

【问题描述】：

我正在尝试使用 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>

【问题讨论】：

您在hx-target 中设置的具有event-list id 的元素在哪里？

【参考方案1】：

我认为 SortableJS 对 HTML 做了一些初始化。

所以它第一次工作正常，但是被 htmx 交换的新 HTML 没有被初始化。

这是一个常见的陷阱。

碰巧使用与您相同的示例：可排序:-)

这里有关于它的文档：https://htmx.org/docs/#3rd-party

在 htmx 中，您将改为使用 htmx.onLoad 函数，并且您将仅从新加载的内容中进行选择，而不是从整个文档中进行选择：

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'
      );
    
)

这将确保当新内容通过 htmx 添加到 DOM 时，可排序元素被正确初始化。

这能解决你的问题吗？