Drag Drop

trialboard.cljs

(ns gallery.prototypes.trialboard
  (:require [cljsjs.react-beautiful-dnd]
            [rum.core :as rum]))
            
(def drag-drop-context
  (.createFactory js/React (.-DragDropContext js/ReactBeautifulDnd)))

(def droppable
  (.createFactory js/React (.-Droppable js/ReactBeautifulDnd)))

(def draggable
  (.createFactory js/React (.-Draggable js/ReactBeautifulDnd)))
  
(rum/defcs View
  < (rum/local {:foo nil})
  [state]
  (let [local-state (:rum/local state)
        {:keys [foo]} @local-state]
    [:main
      [:div
        (drag-drop-context {:onDragEnd #(js/console.log %)}
          (droppable {:droppable-id "list" :type "my-list"}
            [:ul
             (map-indexed
              (fn [index value]
                (draggable {:draggable-id value :index index}
                  [:li value]))
              ["Larry" "Moe" "Curly" "Shemp"])]))]]))