re-frame view components for drag & drop.
- make views draggable
- clojure data (edn) via transit
- any mime-type
- make views to dropzones
- clojure data (edn) via transit
- any mime-type e.g. files
- no extra state just native api
- customizable transit convertion via
set-fn-clj->transit!
&set-fn-transit->clj!
Add the following dependency to your project.clj
:
See in repo your-project.cljs
(ns jtk-dvlp.your-project
(:require
...
[jtk-dvlp.re-frame.dragndrop :as dnd]))
(defn app-view
[]
[:<>
[:style {:type "text/css"}
".draggable {
cursor: pointer;
display: inline-block;
padding: 15px;
}
.draggable.draggable--dragging {
opacity: 0.5;
}
.dropzone {
padding: 15px;
border: 1px dotted black;
margin: 5px;
}
.dropzone.dropzone--over {
border-color: green;
}"]
;; creates a draggable div with custom type and edn data
[dnd/draggable
{:type :my-entity, :data {:yeah :my-entity-data}}
[:div "drag some entity data"]]
;; creates a dropzone div to allow jpg files
[dnd/dropzone
{:types "image/jpeg", :on-drop (comp console.debug clj->js)}
[:div "drop files here"]]
;; creates a dropzone div to allow custom type as defined
[dnd/dropzone
{:types :my-entity, :on-drop (comp console.debug clj->js)}
[:div "drop edn here"]]])
I´d be thankful to receive patches, comments and constructive criticism.
Hope the package is useful :-)