htmx/www/examples/sortable.md

layout
demo_layout.njk

Sortable

In this example we show how to integrate the Sortable javascript library with htmx.

To begin we load the Sortable for content with the .sortable class:

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

And we return the following HTML from the server:

<div id="example1" class="list-group col" hx-post="/items" hx-trigger="end">
  <div class="list-group-item">Item 1</div>
  <div class="list-group-item">Item 2</div>
  <div class="list-group-item">Item 3</div>
  <div class="list-group-item">Item 4</div>
  <div class="list-group-item">Item 5</div>
</div>

{% include demo_ui.html.liquid %}