可排序

在這個範例中，我們展示如何將 Sortable javascript 函式庫與 htmx 整合。

首先，我們使用 Sortable javascript 函式庫初始化 .sortable 類別。

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

          // Make the `.htmx-indicator` unsortable
          filter: ".htmx-indicator",
          onMove: function (evt) {
            return evt.related.className.indexOf('htmx-indicator') === -1;
          },

          // Disable sorting on the `end` event
          onEnd: function (evt) {
            this.option("disabled", true);
          }
      });

      // Re-enable sorting on the `htmx:afterSwap` event
      sortable.addEventListener("htmx:afterSwap", function() {
        sortableInstance.option("disabled", false);
      });
    }
})

接著，我們建立一個表單，其中包含一些可排序的 div，並且我們在 Sortable.js 觸發的 end 事件上觸發 ajax 請求。

<form class="sortable" hx-post="/items" hx-trigger="end">
  <div class="htmx-indicator">Updating...</div>
  <div><input type='hidden' name='item' value='1'/>Item 1</div>
  <div><input type='hidden' name='item' value='2'/>Item 2</div>
  <div><input type='hidden' name='item' value='3'/>Item 3</div>
  <div><input type='hidden' name='item' value='4'/>Item 4</div>
  <div><input type='hidden' name='item' value='5'/>Item 5</div>
</form>

請注意，每個 div 內部都有一個隱藏的輸入欄位，用於指定該列的項目 ID。

當列表透過 Sortable.js 的拖放功能重新排序時，將會觸發 end 事件。然後，htmx 會將重新排序後的項目 ID 發送到 /items，以便由伺服器持久化。

就這樣！

🔗示範