Liking cljdoc? Tell your friends :D

c3kit.wire.dragndrop2


-dispatch-eventcljs

(-dispatch-event dnd group type event)

-start-dragcljs

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

add-groupcljs

(add-group dnd group-key)

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

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

contextcljs

(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) ...))

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)
                ...))
raw docstring

drag-fake-hiccup-fncljs

(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.

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

drag-from-tocljs

(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.

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

drag-thresholdcljs


on-drag-endcljs

(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}

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}
raw docstring

on-drag-outcljs

(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}

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}
raw docstring

on-drag-overcljs

(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}

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}
raw docstring

on-drag-startcljs

(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}

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}
raw docstring

on-dropcljs

(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}

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}
raw docstring

registercljs

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

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)}]
raw docstring

set-drag-classcljs

(set-drag-class dnd group classname)

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

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

cljdoc is a website building & hosting documentation for Clojure/Script libraries

× close