simpleui tutorial examples docs source

Sortable

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

To begin we intialize the Sortable javascript library:

  const sortable = htmx.find('#to-sort');
  new Sortable(sortable, {animation: 150, ghostClass: 'blue-background-class'});

We then trigger POST to sortable on the end event to persist changes (if necessary).

Updating...

Item 1

Item 2

Item 3

Item 4

Item 5

(defn- content [items]
  (list*
    [:div.htmx-indicator "Updating..."]
    (for [item items]
      [:div
        [:input {:type "hidden" :name "order" :value item}]
        "Item " item])))

(defcomponent ^:endpoint sortable [req ^:ints order]
  (if (not-empty order)
    (content order)
    [:form#to-sort {:hx-post "sortable" :hx-trigger "end"}
      (content (range 1 6))]))

(def ring-handler
  (fn [req]
    ;; page renders initial html
    (page
      (sortable req nil))))