Gist used to make HTML Elements draggable with om.next in Clojurescript

step0.cljs

;; =============================================================================
;; Initial Data
(def init-data {:app/lists [{:id       1
                             :elements [{:id   1
                                         :text "This is a draggable element 1"}
                                        {:id   2
                                         :text "This is a draggable element 2"}
                                        {:id   3
                                         :text "This is a draggable element 3"}
                                        {:id   4
                                         :text "This is a draggable element 4"}
                                        {:id   5
                                         :text "This is a draggable element 5"}
                                        {:id   6
                                         :text "This is a draggable element 6"}
                                        {:id   7
                                         :text "This is a draggable element 7"}]}
                            {:id       2
                             :elements [{:id   8
                                         :text "This is a draggable element 8"}
                                        {:id   9
                                         :text "This is a draggable element 9"}]}
                            {:id       3
                             :elements [{:id   10
                                         :text "This is a draggable element 10"}
                                        {:id   11
                                         :text "This is a draggable element 11"}]}]})

;; =============================================================================
;; UI Components
(defui Element
  static om/Ident
  (ident [this {:keys [id]}]
    [:element/by-id id])
  static om/IQuery
  (query [this]
    [:id :text])
  Object
  (render [this]
    (let [{:keys [id text]} (om/props this)]
      (dom/li nil text))))

(def element (om/factory Element {:keyfn :id}))

(defui ElementList
  static om/Ident
  (ident [this {:keys [id]}]
    [:list/by-id id])
  static om/IQuery
  (query [this]
    [:id {:elements (om/get-query Element)}])
  Object
  (render [this]
    (let [{:keys [id elements]} (om/props this)]
      (dom/div nil
               (dom/h4 nil (str "List with id : " id))
               (dom/ul nil
                       (map element elements))))))

(def element-list (om/factory ElementList {:keyfn :id}))

(defui App
  static om/IQuery
  (query [this]
    [{:app/lists (om/get-query ElementList)}])
  Object
  (render [this]
    (let [{:keys [app/lists]} (om/props this)]
      (dom/div nil
               (dom/h1 nil "Lists with draggable behavior !")
               (map element-list lists)))))

;; =============================================================================
;; Read/Mutate
(defmulti read om/dispatch)

(defmethod read :default
  [{:keys [query state]} key params]
  (let [st @state]
    {:value (om/db->tree query (get st key) st)}))

;; =============================================================================
;; Application Root

(def parser (om/parser {:read read}))

(def reconciler (om/reconciler {:state init-data :parser parser}))

(om/add-root! reconciler App (.getElementById js/document "app"))