using react-sortable-hoc in reagent

react-sortable-hoc-in-reagent.cljs

(def react-sortable-hoc (aget js/window "deps" "react-sortable-hoc"))

(defn make-sortable-element-component [wrapped-component]
  (let [sortable-element-factory (.-SortableElement react-sortable-hoc)]
    (-> wrapped-component
        r/reactify-component
        sortable-element-factory
        r/adapt-react-class)))

(defn make-sortable-container-component [wrapped-component]
  (let [sortable-container-factory (.-SortableContainer react-sortable-hoc)]
    (-> wrapped-component
        r/reactify-component
        sortable-container-factory
        r/adapt-react-class)))

(def SortableElementComponent
  (make-sortable-element-component
    (fn [props]
      [:li "Item: " (:value props)])))

(def SortableListComponent
  (make-sortable-container-component
    (fn [props]
      [:ul
       (for [[idx value] (make-indexed (:items props))]
         [SortableElementComponent {:index idx
                                    :value value}])])))

;; using it

[SortableList {:items ["first" "second" "third"]
               :helper-class "react-sortable-hoc-helper"}] ;; setting z-index to make the dragged item visible
                     

@vbedegi Thanks for this! Do you know by any chance how to make it work with rum though?