可排序JS在htmx呈现部分

Question

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

Answer 1

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

因此，它第一次运行良好，但是由htmx交换的新HTML不会被初始化。

这是一个常见的陷阱。

偶然地，我们使用了与您相同的示例: sortable :-)

这里有关于它的文档：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时，可排序元素将被正确初始化。

这能解决你的问题吗？

Answer 2

我也有同样的问题，直到我在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'
      });
    }
});

Answer 3

我通过更改目标模板文件来呈现views.py中的排序函数来解决这个问题。

可以这么说，你似乎需要改变这一行。

    return render(request,'timing/partials/eventlist.html',{'events':events})

您有一个注释“您在have中设置的具有事件列表id的元素在哪里？”-by先生/夫人

我不能评论，因为我需要超过49个名誉来评论。

但我预测您的模板文件"eventlist.html“可能包含在另一个模板HTML文件中，该文件使用{% BugBytes %}标记，从源代码类似于BugBytes HTMX和Django YouTube教程以及在表单标记中使用hx目标判断。

该课程的资源库这里重新设置。

关于这个问题，我发了一篇文章给Stackoverflow，所以请参考它。

链接在下面。

HTMX可排序只工作一次，呈现使其禁用。