https://github.com/jtkdvlp/re-frame-dragndrop

re-frame view components for drag & drop
https://github.com/jtkdvlp/re-frame-dragndrop

clojurescript drag-and-drop draggable dropzone re-frame

Last synced: 2 months ago
JSON representation

re-frame view components for drag & drop

• Host: GitHub
• URL: https://github.com/jtkdvlp/re-frame-dragndrop
• Owner: jtkDvlp
• License: other
• Created: 2022-09-27T17:09:13.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2022-11-21T00:31:37.000Z (over 2 years ago)
• Last Synced: 2025-03-01T07:42:34.825Z (3 months ago)
• Topics: clojurescript, drag-and-drop, draggable, dropzone, re-frame
• Language: Clojure
• Homepage:
• Size: 12.7 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![Clojars Project](https://img.shields.io/clojars/v/net.clojars.jtkdvlp/re-frame-dragndrop.svg)](https://clojars.org/net.clojars.jtkdvlp/re-frame-dragndrop)

[![cljdoc badge](https://cljdoc.org/badge/net.clojars.jtkdvlp/re-frame-dragndrop)](https://cljdoc.org/d/net.clojars.jtkdvlp/re-frame-dragndrop/CURRENT)

# re-frame-dragndrop

re-frame view components for drag & drop.

## Features

* make views draggable

  * clojure data (edn) via [transit](https://github.com/jtkDvlp/transit)

  * any mime-type

* make views to dropzones

  * clojure data (edn) via [transit](https://github.com/jtkDvlp/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!`

## Getting started

### Get it / add dependency

Add the following dependency to your `project.clj`:


[![Clojars Project](https://img.shields.io/clojars/v/net.clojars.jtkdvlp/re-frame-dragndrop.svg)](https://clojars.org/net.clojars.jtkdvlp/re-frame-dragndrop)

### Usage

See in repo [your-project.cljs](https://github.com/jtkDvlp/re-frame-dragndrop/blob/master/dev/jtk_dvlp/your_project.cljs)

```clojure

(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"]]])

```

## Appendix

I´d be thankful to receive patches, comments and constructive criticism.

Hope the package is useful :-)