c3kit.wire.dragndrop2 — com.cleancoders.c3kit/wire 1.0.25

-dispatch-event cljs

(-dispatch-event dnd group type event)

-start-drag cljs

(-start-drag dnd group member node js-event)

add-group cljs

(add-group dnd group-key)

Configures the context to accept a new group of draggable/droppable objects based on the group-key.

context cljs

(context)

Create a 'context' for dragging and dropping. This atom will store all the data needed to support drag-n-drop behavior. See if the comments at the top of this file for the data structure if you're curious.

It is probably best to create a new context for each drag and drop scenario. That is, try not to load a single context with groups that will not be used at the same time.

Example Usage

(ns sample (:require [c3kit.wire.dragndrop2 :as dnd]))

(def my-dnd (-> (dnd/context) (dnd/add-group :draggable) (dnd/add-group :droppable) (dnd/add-from-to :draggable :droppable) ...))

drag-fake-hiccup-fn cljs

(drag-fake-hiccup-fn dnd group fake-hiccup-fn)

Used to specify how dragged objects should appear. By default, the dragged node will be duplicated and used for dragging.

drag-from-to cljs

(drag-from-to dnd from-key target-key)

Configures the context to allows drag and drop actions where from-key objects will be dragged to target-key objects.

drag-threshold cljs

on-drag-end cljs

(on-drag-end dnd group listener)

Adds a callback (fn [event]) that will be invoked when an object is no longer being dragged.

Rationale: Remove outline of dropzones

The event map will be populated with keys: #{:source-group :source-key :source-node :browser-event}

on-drag-out cljs

(on-drag-out dnd group listener)

Adds a callback (fn [event]) that will be invoked when an object has been dragged out of target node.

Rationale: Remove highlight from dropzone.

The event map will be populated with keys: #{:source-group :source-key :source-node :target-group :target-key :target-node :browser-event}

on-drag-over cljs

(on-drag-over dnd group listener)

Adds a callback (fn [event]) that will be invoked when an object has been dragged over a target node.

Rationale: Highlight the dropzone so the user know they can drop the object.

The event map will be populated with keys: #{:source-group :source-key :source-node :target-group :target-key :target-node :browser-event}

on-drag-start cljs

(on-drag-start dnd group listener)

Adds a callback (fn [event]) that will be invoked when an object has been dragged.

Rationale: Maybe outline the dropzones so the user knows where to drop the object.

The event map will be populated with keys: #{:source-group :source-key :source-node :browser-event}

on-drop cljs

(on-drop dnd group listener)

Adds a callback (fn [event]) that will be invoked when an object has been dropped onto a target node.

Rationale: Invoke action that required drag-n-drop

The event map will be populated with keys: #{:source-group :source-key :source-node :target-group :target-key :target-node :browser-event}

register cljs

(register dnd group member)

Create a React ref callback (https://reactjs.org/docs/refs-and-the-dom.html) that registers/de-registers a dom node with the context.

dnd - the context group - the key of the group this node belongs to member - a key for this node must be unique within the group

Usage with reagent: [:div {:ref (dnd/register my-context :group-id :member-id)}]

set-drag-class cljs

(set-drag-class dnd group classname)

Configures the context to add a css class to draggable nodes when they are being dragged.