simpleui tutorial examples full docs source motivation simpleui within Clojure youtube

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