Skip to content

Instantly share code, notes, and snippets.

(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
@dupuchba
dupuchba / step0.cljs
Created March 16, 2017 15:42
Gist used to make HTML Elements draggable with om.next in Clojurescript
;; =============================================================================
;; 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
;; REPL
(om/tree->db App init-data true)
{:app/lists [[:list/by-id 1] [:list/by-id 2] [:list/by-id 3]],
:element/by-id {1 {:id 1, :text "This is a draggable element 1"},
2 {:id 2, :text "This is a draggable element 2"},
3 {:id 3, :text "This is a draggable element 3"},
4 {:id 4, :text "This is a draggable element 4"},
5 {:id 5, :text "This is a draggable element 5"},
6 {:id 6, :text "This is a draggable element 6"},
(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)]
(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)]
(defui App
static om/IQuery
(query [this]
[{:app/lists (om/get-query ElementList)}
:elements/dragged])
Object
(render [this]
(let [{:keys [app/lists elements/dragged]} (om/props this)]
(dom/div nil
(dom/h1 nil "Lists with draggable behavior !")
(defmulti mutate om/dispatch)
(defmethod mutate 'element/drag
[{:keys [state]} _ params]
{:value {:keys [:elements/dragged]}
:action (fn []
(if-not (empty? params)
(swap! state assoc :elements/dragged params)
(swap! state assoc :elements/dragged nil)))})
(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
(on-drag-start [this element]
(om/transact! this `[(element/drag {:from ~(om/get-ident this) :element ~element}) :app/lists]))
(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)
(om/app-state reconciler)
=>
#object[cljs.core.Atom
{:val {:app/lists [[:list/by-id 1] [:list/by-id 2] [:list/by-id 3]],
:element/by-id {1 {:id 1, :text "This is a draggable element 1"},
2 {:id 2, :text "This is a draggable element 2"},
3 {:id 3, :text "This is a draggable element 3"},
4 {:id 4, :text "This is a draggable element 4"},
5 {:id 5, :text "This is a draggable element 5"},
6 {:id 6, :text "This is a draggable element 6"},