index.cljs.hl

(page "index.html")

(let [dragging (cell nil)
      reorder (fn [items from to]
                (let [item        (get items from)
                      [head tail] (split-at from items)
                      [head tail] (split-at to (into (vec head) (rest tail)))]
                  (into (vec head) (cons item tail))))]
  (defmethod do! :reorderable
    [elem k [items i]]
    (with-timeout 0
      (doto (js/jQuery elem)
        (.on "mousedown" #(reset! dragging [@items @i]))
        (.on "mousemove" #(when @dragging
                            (let [[items* from] @dragging]
                              (reset! items (reorder items* from @i))))))))
  (with-init!
    (-> (js/jQuery "body")
        (.on "mouseup" #(reset! dragging nil)))))

(def indexed (partial map-indexed list))
(defc items ["a" "b" "c" "d" "e"])

(html
  (head
    (link :href "app.css" :rel "stylesheet"))
  (body
    (h1 "Hello, Hoplon!")
    (ul
      (loop-tpl
        :bindings [[i item] (cell= (indexed items))]
        (li :reorderable [items i] :text item)))))