Drag and drop with Reagent and Interact.js

drag-drop-reagent.cljs

(defn draggable []
  (let [pos (atom [0 0])]
    (reagent/create-class
     {:render
      #(let [[x y] @pos]
         [:div.d {:style {:transform (str "translate(" x "px," y "px)")}}
          "I can be dragged"])

      :component-did-mount
      (fn [this]
        (.draggable (js/interact (reagent/dom-node this))
                    #js {:onmove (fn [ev]
                                   (let [[x y] @pos
                                         new-x (+ (.-dx ev) x)
                                         new-y (+ (.-dy ev) y)]
                                     (reset! pos [new-x new-y])))}))})))