API Docs for: 0.0.1
Show:

DD Class

Defined in: src/drag-drop/drag-drop.js:3
Module: drag-drop

Provides drag and drop functionality with dropzones

Copyright (c) 2014 ITSA - https://github.com/itsa New BSD License - http://choosealicense.com/licenses/bsd-3-clause/

Methods

_allowedEffects

(
  • dragableElement
)
String private

Defined in src/drag-drop/drag-drop.js:256

Available since 0.0.1

Returns the allowed effects on the dragable-HtmlElement. Is determined by the attribute dd-effect-allowed Will be set to "move" when undefined.

Parameters:

  • dragableElement HtmlElement

    HtmlElement that is checked for its allowed effects

Returns:

String:

allowed effects: "move", "copy" or "all"

_defFnDrag

(
  • e
)
private

Provided by the drag module.

Defined in src/drag/drag.js:153

Available since 0.0.1

Default function for the *:dd-drag-event

Parameters:

_defFnDrop

(
  • e
)
private

Provided by the drag module.

Defined in src/drag/drag.js:213

Available since 0.0.1

Default function for the *:dd-drop-event

Parameters:

_defFnDrop (extended by drag-drop)

(
  • e
  • sourceNode
  • dragNode
  • dropzoneSpecified
  • relatives
)
private

Defined in src/drag-drop/drag-drop.js:272

Available since 0.0.1

Default function for the *:dd-drop-event. Overrides the definition of the drag-module.

Parameters:

  • e Object

    eventobject

  • sourceNode HtmlElement

    the original HtmlElement

  • dragNode HtmlElement

    the dragged HtmlElement (either original or clone)

  • dropzoneSpecified Boolean

    whether the sourceNode had a dropzone specified

  • relatives Array

    hash with all draggables that are being move togerther with the master draggable

_defFnOver

(
  • e
)
private

Defined in src/drag-drop/drag-drop.js:324

Available since 0.0.1

Default function for the *:dropzone-event

Parameters:

_defFnStart

(
  • e
)
private

Provided by the drag module.

Defined in src/drag/drag.js:245

Available since 0.0.1

Default function for the *:dd-event

Parameters:

_defineDDStart

(
  • emitterName
)
private

Provided by the drag module.

Defined in src/drag/drag.js:263

Available since 0.0.1

Defines the definition of the dd event: the first phase of the drag-eventcycle (dd, :dd-drag, :dd-drop)

Parameters:

  • emitterName String

    the emitterName, which leads into the definition of event emitterName:dd

_defineDropEv

(
  • e
  • sourceNode
  • dragNode
  • dropzoneSpecified
  • x
  • y
  • inlineLeft
  • inlineTop
  • relatives
)
private

Defined in src/drag-drop/drag-drop.js:378

Available since 0.0.1

Defines the definition of the dd-drop event: the last phase of the drag-eventcycle (dd-start, :dd-drag, :dd-drop)

Parameters:

  • e Object

    eventobject

  • sourceNode HtmlElement

    the original HtmlElement

  • dragNode HtmlElement

    the dragged HtmlElement (either original or clone)

  • dropzoneSpecified Boolean

    whether the sourceNode had a dropzone specified

  • x Number

    x-position in coordinaties relative to document (like getX())

  • y Number

    y-position in coordinaties relative to document (like getX())

  • inlineLeft String

    inline css left for the original sourceNode

  • inlineTop String

    inline css top for the original sourceNode

  • relatives Array

    hash with all draggables that are being move togerther with the master draggable

_defineOverEv

(
  • e
  • dropzones
)
private

Defined in src/drag-drop/drag-drop.js:403

Available since 0.0.1

Defines the definition of the dropzone event. Also sets up listeners to tricker dd-over when the mouse is above an dropzone.

Parameters:

  • e Object

    eventobject

  • dropzones NodeList

    list with dropzonenodes

_emitDropzoneDrop

(
  • e
)
private

Defined in src/drag-drop/drag-drop.js:524

Available since 0.0.1

Emits a dropzone-drop event.

Parameters:

  • e Object

    eventobject to pass arround

_handleDrop

(
  • e
  • sourceNode
  • dragNode
  • relatives
)
private

Defined in src/drag-drop/drag-drop.js:566

Available since 0.0.1

Sets the draggable node back to its original position

Parameters:

  • e Object

    eventobject

  • sourceNode HtmlElement

    the original HtmlElement

  • dragNode HtmlElement

    the dragged HtmlElement (either original or clone)

  • relatives Array

    hash with all draggables that are being move togerther with the master draggable

_initializeDrag

(
  • e
)
private

Provided by the drag module.

Defined in src/drag/drag.js:281

Available since 0.0.1

Default function for the *:dd-drag-event

Parameters:

_prevFnStart

(
  • e
)
private

Provided by the drag module.

Defined in src/drag/drag.js:473

Available since 0.0.1

Prevented function for the *:dd-start-event

Parameters:

_restoreDraggables

(
  • e
  • sourceNode
  • dragNode
  • dropzoneSpecified
  • x
  • y
  • inlineLeft
  • inlineTop
  • relatives
)
private

Defined in src/drag-drop/drag-drop.js:758

Available since 0.0.1

Sets the draggable items back to their original place. Should only be used when you prevent the default-function of dd-drop, so you can choose to do set the draggables back conditionally.

Parameters:

  • e Object

    eventobject

  • sourceNode HtmlElement

    the original HtmlElement

  • dragNode HtmlElement

    the dragged HtmlElement (either original or clone)

  • dropzoneSpecified Boolean

    whether the sourceNode had a dropzone specified

  • x Number

    x-position in coordinaties relative to document (like getX())

  • y Number

    y-position in coordinaties relative to document (like getX())

  • inlineLeft String

    inline css left for the original sourceNode

  • inlineTop String

    inline css top for the original sourceNode

  • relatives Array

    hash with all draggables that are being move togerther with the master draggable

_setBack

(
  • sourceNode
  • dragNode
  • dropzoneSpecified
  • x
  • y
  • inlineLeft
  • inlineTop
  • [emitDropzoneEvent]
)
private

Defined in src/drag-drop/drag-drop.js:796

Available since 0.0.1

Sets the draggable node back to its original position

Parameters:

  • sourceNode HtmlElement

    the original HtmlElement

  • dragNode HtmlElement

    the dragged HtmlElement (either original or clone)

  • dropzoneSpecified Boolean

    whether the sourceNode had a dropzone specified

  • x Number

    x-position in coordinaties relative to document (like getX())

  • y Number

    y-position in coordinaties relative to document (like getX())

  • inlineLeft String

    inline css left for the original sourceNode

  • inlineTop String

    inline css top for the original sourceNode

  • [emitDropzoneEvent] Boolean optional

    whether dropzone-event should be emitted

_setupKeyEv

() private

Defined in src/drag-drop/drag-drop.js:873

Available since 0.0.1

Sets up a keydown and keyup listener, to monitor whether a ctrlKey (windows) or metaKey (Mac) is pressed to support the copying of draggable items

_setupMouseEv

() private

Provided by the drag module.

Defined in src/drag/drag.js:486

Available since 0.0.1

Engine behind the drag-drop-cycle. Sets up a mousedown listener to initiate a drag-drop eventcycle. The eventcycle start whenever one of these events happens on a HtmlElement with the attribute dd-draggable="true". The drag-drop eventcycle consists of the events: dd-start, emitterName:dd-drag and emitterName:dd-drop

_teardownOverEvent

(
  • e
)
private

Defined in src/drag-drop/drag-drop.js:921

Available since 0.0.1

Cleansup the dragover subscriber and fulfills any dropzone-promise.

Parameters:

allowCopy

(
  • dropzone
)
Boolean

Defined in src/drag-drop/drag-drop.js:945

Available since 0.0.1

Returns true if the dropzone-HtmlElement accepts copy-dragables. Is determined by the attribute dd-effect-allowed="copy" or dd-effect-allowed="all"

Parameters:

  • dropzone HtmlElement

    HtmlElement that is checked for its allowed effects

Returns:

Boolean:

if copy-dragables are allowed

allowSwitch

(
  • dragableElement
)
Boolean

Defined in src/drag-drop/drag-drop.js:960

Available since 0.0.1

Returns true if the dragable-HtmlElement allowes to switch between copy and move.

Parameters:

  • dragableElement HtmlElement

    HtmlElement that is checked for its allowed effects

Returns:

Boolean:

if copy-dragables are allowed

getDropzoneEmitter

(
  • dropzone
)
String | Null

Defined in src/drag-drop/drag-drop.js:973

Available since 0.0.1

Returns the emitterName that the dropzone accepts.

Parameters:

  • dropzone String

    dropzone attribute of the dropzone HtmlElement

Returns:

String | Null:

the emitterName that is accepted

init

(
  • dragableElement
)
Boolean

Provided by the drag module.

Defined in src/drag/drag.js:618

Available since 0.0.1

Initializes dragdrop. Needs to be invoked, otherwise DD won't run.

Parameters:

  • dragableElement HtmlElement

    HtmlElement that is checked for its allowed effects

Returns:

Boolean:

if copy-dragables are allowed

init (extended by drag-drop)

(
  • dragableElement
)
Boolean

Defined in src/drag-drop/drag-drop.js:987

Available since 0.0.1

Initializes dragdrop. Needs to be invoked, otherwise DD won't run.

Parameters:

  • dragableElement HtmlElement

    HtmlElement that is checked for its allowed effects

Returns:

Boolean:

if copy-dragables are allowed

notify

(
  • callback
  • context
  • setup
)
Object static

Provided by the drag module.

Defined in src/drag/drag.js:637

Available since 0.0.1

Creates a notifier to response after each Drag event is set up, or teared down. You can use this to hook in into the drag-eventcycle: the drop-module uses it this way.

Parameters:

  • callback Function

    subscriber: will be invoked after every drag-event is set up. Recieves 2 arguments: the eventobject and the internal property: ddProps

  • context Object

    context of the callback

  • setup Boolean

    wheter the callback should be invoked on setup (true) or teardown (false)

Returns:

Object:

handle with a method detach() which you can use to remove it from the notifier-hash

onlyCopy

(
  • dragableElement
)
Boolean

Defined in src/drag-drop/drag-drop.js:1064

Available since 0.0.1

Returns true if the dragable-HtmlElement accepts only copy-dragables (no moveable) Is determined by the attribute dd-effect-allowed="copy"

Parameters:

  • dragableElement HtmlElement

    HtmlElement that is checked for its allowed effects

Returns:

Boolean:

if only copy-dragables are allowed

restoreDraggables

() private chainable

Defined in src/drag-drop/drag-drop.js:1078

Available since 0.0.1

Sets the draggable items back to their original place. Should only be used when you prevent the default-function of dd-drop, so you can choose to do set the draggables back conditionally.

Properties

_notifiers

Array private

Provided by the drag module.

Defined in src/drag/drag.js:140

Available since 0.0.1

Internal hash with notifiers to response after each Drag event is set up, or teared down. You can use this to hook in into the drag-eventcycle: the drop-module uses it this way. Is filled by using notify().

Default: []

ddProps

Object

Provided by the drag module.

Defined in src/drag/drag.js:100

Available since 0.0.1

Objecthash containing all specific information about the particular drag-cycle. It has a structure like this:

ddProps = { dragNode {HtmlElement} Element that is dragged x {Number} absolute x-position of the draggable inside document when the drag starts y {Number} absolute y-position of the draggable inside document when the drag starts inlineLeft {String} inline css of the property left when drag starts inlineTop {String} inline css of the property top when drag starts winConstrained {Boolean} whether the draggable should be constrained to window xMouseLast {Number} absolute x-position of the mouse inside document when the drag starts yMouseLast {Number} absolute y-position of the draggable inside document when the drag starts winScrollLeft {Number} the left-scroll of window when drag starts winScrollTop {Number} the top-scroll of window when drag starts constrain = { // constrain-properties when constrained to a HtmlElement xOrig {Number} x-position in the document, included with left-border-width yOrig {Number} y-position in the document, included with top-border-width x {Number} xOrig corrected with scroll-left of the constrained node y {Number} yOrig corrected with scroll-top of the constrained node w {Number} scrollWidth h {Number} scrollHeight }; relatives[{ // Array with objects that represent all draggables that come along with the master-draggable (in case of multiple items), excluded the master draggable itself sourceNode {HtmlElement} original node (defined by drag-drop) dragNode {HtmlElement} draggable node shiftX {Number} the amount of left-pixels that this HtmlElement differs from the dragged element shiftY {Number} the amount of top-pixels that this HtmlElement differs from the dragged element inlineLeft {String} inline css of the property left when drag starts inlineTop {String} inline css of the property top when drag starts }] }

Default: {}

ddProps (extended by drag-drop)

Object

Defined in src/drag-drop/drag-drop.js:118

Available since 0.0.1

Objecthash containing all specific information about the particular drag-cycle. It has a structure like this:

ddProps = { sourceNode {HtmlElement} original node (defined by drag-drop) dragNode {HtmlElement} Element that is dragged x {Number} absolute x-position of the draggable inside document when the drag starts y {Number} absolute y-position of the draggable inside document when the drag starts inlineLeft {String} inline css of the property left when drag starts inlineTop {String} inline css of the property top when drag starts winConstrained {Boolean} whether the draggable should be constrained to window xMouseLast {Number} absolute x-position of the mouse inside document when the drag starts yMouseLast {Number} absolute y-position of the draggable inside document when the drag starts winScrollLeft {Number} the left-scroll of window when drag starts winScrollTop {Number} the top-scroll of window when drag starts constrain = { // constrain-properties when constrained to a HtmlElement xOrig {Number} x-position in the document, included with left-border-width yOrig {Number} y-position in the document, included with top-border-width x {Number} xOrig corrected with scroll-left of the constrained node y {Number} yOrig corrected with scroll-top of the constrained node w {Number} scrollWidth h {Number} scrollHeight }; dropzoneSpecified {Boolean} whether the draggable has a dropzone specified (either by dd-dropzone or by dd-emitter) (defined by drag-drop) dragOverEv {Object} Eventhandler that watches for mousemove to detect dropzone-over events (defined by drag-drop) relatives[{ // Array with objects that represent all draggables that come along with the master-draggable (in case of multiple items), excluded the master draggable itself sourceNode {HtmlElement} original node (defined by drag-drop) dragNode {HtmlElement} draggable node shiftX {Number} the amount of left-pixels that this HtmlElement differs from the dragged element shiftY {Number} the amount of top-pixels that this HtmlElement differs from the dragged element inlineLeft {String} inline css of the property left when drag starts inlineTop {String} inline css of the property top when drag starts }] relativeDragNodes [HtmlElements] Array with all copyied Nodes corresponding to ddProps.relatives. Only in case of copying multiple items (defined by drag-drop) }

Default: {}

Events

*:dd

Provided by the drag module.

Defined in src/drag/drag.js:546

Available since 0.1

Emitted when a draggable Element's drag-cycle starts. You can use a before-subscriber to specify e.relatives, which should be a nodelist with HtmlElements, that should be dragged togehter with the master draggable Element.

Event Payload:

  • e Object

    eventobject including:

    • target HtmlElement

      the HtmlElement that is being dragged

    • currentTarget HtmlElement

      the HtmlElement that is delegating

    • sourceTarget HtmlElement

      the deepest HtmlElement where the mouse lies upon

    • dd Promise

      Promise that gets fulfilled when dragging is ended. The fullfilled-callback has no arguments.

    • xMouse Number

      the current x-position in the window-view

    • yMouse Number

      the current y-position in the window-view

    • clientX Number

      the current x-position in the window-view

    • clientY Number

      the current y-position in the window-view

    • xMouseOrigin Number

      the original x-position in the document when drag started (incl. scrollOffset)

    • yMouseOrigin Number

      the original y-position in the document when drag started (incl. scrollOffset)

    • [relatives] NodeList optional

      an optional list that the user could set in a before-subscriber of the dd-event to inform which nodes are related to the draggable node and should be dragged as well.

*:dd-drag

Provided by the drag module.

Defined in src/drag/drag.js:366

Available since 0.1

Emitted during the drag-cycle of a draggable Element (while it is dragged).

Event Payload:

  • e Object

    eventobject including:

    • target HtmlElement

      the HtmlElement that is being dragged

    • currentTarget HtmlElement

      the HtmlElement that is delegating

    • sourceTarget HtmlElement

      the deepest HtmlElement where the mouse lies upon

    • dd Promise

      Promise that gets fulfilled when dragging is ended. The fullfilled-callback has no arguments.

    • xMouse Number

      the current x-position in the window-view

    • yMouse Number

      the current y-position in the window-view

    • clientX Number

      the current x-position in the window-view

    • clientY Number

      the current y-position in the window-view

    • xMouseOrigin Number

      the original x-position in the document when drag started (incl. scrollOffset)

    • yMouseOrigin Number

      the original y-position in the document when drag started (incl. scrollOffset)

    • [relatives] NodeList optional

      an optional list that the user could set in a before-subscriber of the dd-event to inform which nodes are related to the draggable node and should be dragged as well.

*:dd-drag (extended by drag-drop)

Defined in src/drag-drop/drag-drop.js:22

Available since 0.0.1

Emitted during the drag-cycle of a draggable Element (while it is dragged).

Event Payload:

  • e Object

    eventobject including:

    • target HtmlElement

      the HtmlElement that is being dragged

    • dragNode HtmlElement

      The HtmlElement that is being dragged (equals e.target)

    • [sourceNode] HtmlElement optional

      The original Element. Only when a copy is made --> e.dragNode is being moved while e.sourceNode stand at its place.

    • currentTarget HtmlElement

      the HtmlElement that is delegating

    • sourceTarget HtmlElement

      the deepest HtmlElement where the mouse lies upon

    • [dropTarget] HtmlElement optional

      The dropzone HtmlElement that will be available whenever the draggable gets over a dropzone.

    • dd Promise

      Promise that gets fulfilled when dragging is ended. The fullfilled-callback has no arguments.

    • [dropzone] Promise optional

      a Promise that will be available whenever the draggable gets over a dropzone. The Promise that gets fulfilled as soon as the draggable is dropped, or outside the dropzone Will fulfill with one argument: onDropzone {Boolean} when true, the draggable is dropped inside the dropzone, otherwise the draggable got outside the dropzone without beging dropped.

    • ctrlKey Boolean

      Whether the Ctrl/cmd key is pressed

    • isCopied Boolean

      Whether the drag is a copy-drag

    • xMouse Number

      the current x-position in the window-view

    • yMouse Number

      the current y-position in the window-view

    • clientX Number

      the current x-position in the window-view

    • clientY Number

      the current y-position in the window-view

    • xMouseOrigin Number

      the original x-position in the document when drag started (incl. scrollOffset)

    • yMouseOrigin Number

      the original y-position in the document when drag started (incl. scrollOffset)

    • [relatives] NodeList optional

      an optional list that the user could set in a before-subscriber of the dd-event to inform which nodes are related to the draggable node and should be dragged as well.

    • [relativeDragNodes] NodeList optional

      an optional list that holds the HtmlElements that corresponds with the e.relative list, but is a list with draggable Elements.

*:dd-drop

Provided by the drag module.

Defined in src/drag/drag.js:415

Available since 0.1

Emitted when drag-cycle of a draggable Element is ended.

Event Payload:

  • e Object

    eventobject including:

    • target HtmlElement

      the HtmlElement that is being dragged

    • currentTarget HtmlElement

      the HtmlElement that is delegating

    • sourceTarget HtmlElement

      the deepest HtmlElement where the mouse lies upon

    • dd Promise

      Promise that gets fulfilled when dragging is ended. The fullfilled-callback has no arguments.

    • xMouse Number

      the current x-position in the window-view

    • yMouse Number

      the current y-position in the window-view

    • clientX Number

      the current x-position in the window-view

    • clientY Number

      the current y-position in the window-view

    • xMouseOrigin Number

      the original x-position in the document when drag started (incl. scrollOffset)

    • yMouseOrigin Number

      the original y-position in the document when drag started (incl. scrollOffset)

    • [relatives] NodeList optional

      an optional list that the user could set in a before-subscriber of the dd-event to inform which nodes are related to the draggable node and should be dragged as well.

*:dd-drop (extended by drag-drop)

Defined in src/drag-drop/drag-drop.js:55

Available since 0.0.1

Emitted when drag-cycle of a draggable Element is ended.

Event Payload:

  • e Object

    eventobject including:

    • target HtmlElement

      the HtmlElement that is being dragged

    • dragNode HtmlElement

      The HtmlElement that is being dragged (equals e.target)

    • [sourceNode] HtmlElement optional

      The original Element. Only when a copy is made --> e.dragNode is being moved while e.sourceNode stand at its place.

    • currentTarget HtmlElement

      the HtmlElement that is delegating

    • sourceTarget HtmlElement

      the deepest HtmlElement where the mouse lies upon

    • [dropTarget] HtmlElement optional

      The dropzone HtmlElement that will be available whenever the draggable gets over a dropzone.

    • dd Promise

      Promise that gets fulfilled when dragging is ended. The fullfilled-callback has no arguments.

    • [dropzone] Promise optional

      a Promise that will be available whenever the draggable gets over a dropzone. The Promise that gets fulfilled as soon as the draggable is dropped, or outside the dropzone Will fulfill with one argument: onDropzone {Boolean} when true, the draggable is dropped inside the dropzone, otherwise the draggable got outside the dropzone without beging dropped.

    • ctrlKey Boolean

      Whether the Ctrl/cmd key is pressed

    • isCopied Boolean

      Whether the drag is a copy-drag

    • xMouse Number

      the current x-position in the window-view

    • yMouse Number

      the current y-position in the window-view

    • clientX Number

      the current x-position in the window-view

    • clientY Number

      the current y-position in the window-view

    • xMouseOrigin Number

      the original x-position in the document when drag started (incl. scrollOffset)

    • yMouseOrigin Number

      the original y-position in the document when drag started (incl. scrollOffset)

    • [relatives] NodeList optional

      an optional list that the user could set in a before-subscriber of the dd-event to inform which nodes are related to the draggable node and should be dragged as well.

    • [relativeDragNodes] NodeList optional

      an optional list that holds the HtmlElements that corresponds with the e.relative list, but is a list with draggable Elements.

*:dropzone-drop

Defined in src/drag-drop/drag-drop.js:533

Available since 0.1

Emitted when a draggable gets dropped inside a dropzone.

Event Payload:

  • e Object

    eventobject including:

    • target HtmlElement

      the dropzone

    • dragNode HtmlElement

      The HtmlElement that is being dragged

    • dropzone Promise

      The Promise that gets fulfilled as soon as the draggable is dropped, or outside the dropzone Will fulfill with one argument: onDropzone {Boolean} when true, the draggable is dropped inside the dropzone, otherwise the draggable got outside the dropzone without beging dropped.

    • dropTarget HtmlElement

      The dropzone HtmlElement. Equals e.target

    • ctrlKey Boolean

      Whether the Ctrl/cmd key is pressed

    • isCopied Boolean

      Whether the drag is a copy-drag

    • [sourceNode] HtmlElement optional

      The original Element. Only when a copy is made --> e.dragNode is being moved while e.sourceNode stand at its place.

    • currentTarget HtmlElement

      the HtmlElement that is delegating the draggable

    • sourceTarget HtmlElement

      the deepest HtmlElement of the draggable where the mouse lies upon

    • dd Promise

      Promise that gets fulfilled when dragging is ended. The fullfilled-callback has no arguments.

    • xMouse Number

      the current x-position in the window-view

    • yMouse Number

      the current y-position in the window-view

    • clientX Number

      the current x-position in the window-view

    • clientY Number

      the current y-position in the window-view

    • xMouseOrigin Number

      the original x-position in the document when drag started (incl. scrollOffset)

    • yMouseOrigin Number

      the original y-position in the document when drag started (incl. scrollOffset)

    • [relatives] NodeList optional

      an optional list that the user could set in a before-subscriber of the dd-event to inform which nodes are related to the draggable node and should be dragged as well.

    • [relativeDragNodes] NodeList optional

      an optional list that holds the HtmlElements that corresponds with the e.relative list, but is a list with draggable Elements.

*:dropzone-out

Defined in src/drag-drop/drag-drop.js:343

Available since 0.1

Emitted when the draggable gets out of the dropzone.

Event Payload:

  • e Object

    eventobject including:

    • target HtmlElement

      the dropzone

    • dragNode HtmlElement

      The HtmlElement that is being dragged

    • dropzone Promise

      The Promise that gets fulfilled as soon as the draggable is dropped, or outside the dropzone Will fulfill with one argument: onDropzone {Boolean} when true, the draggable is dropped inside the dropzone, otherwise the draggable got outside the dropzone without beging dropped.

    • dropTarget HtmlElement

      The dropzone HtmlElement. Equals e.target

    • ctrlKey Boolean

      Whether the Ctrl/cmd key is pressed

    • isCopied Boolean

      Whether the drag is a copy-drag

    • [sourceNode] HtmlElement optional

      The original Element. Only when a copy is made --> e.dragNode is being moved while e.sourceNode stand at its place.

    • currentTarget HtmlElement

      the HtmlElement that is delegating the draggable

    • sourceTarget HtmlElement

      the deepest HtmlElement of the draggable where the mouse lies upon

    • dd Promise

      Promise that gets fulfilled when dragging is ended. The fullfilled-callback has no arguments.

    • xMouse Number

      the current x-position in the window-view

    • yMouse Number

      the current y-position in the window-view

    • clientX Number

      the current x-position in the window-view

    • clientY Number

      the current y-position in the window-view

    • xMouseOrigin Number

      the original x-position in the document when drag started (incl. scrollOffset)

    • yMouseOrigin Number

      the original y-position in the document when drag started (incl. scrollOffset)

    • [relatives] NodeList optional

      an optional list that the user could set in a before-subscriber of the dd-event to inform which nodes are related to the draggable node and should be dragged as well.

    • [relativeDragNodes] NodeList optional

      an optional list that holds the HtmlElements that corresponds with the e.relative list, but is a list with draggable Elements.

*:dropzone-over

Defined in src/drag-drop/drag-drop.js:485

Available since 0.1

Emitted when the draggable gets inside a dropzone.

Event Payload:

  • e Object

    eventobject including:

    • target HtmlElement

      the dropzone

    • dragNode HtmlElement

      The HtmlElement that is being dragged

    • dropzone Promise

      The Promise that gets fulfilled as soon as the draggable is dropped, or outside the dropzone Will fulfill with one argument: onDropzone {Boolean} when true, the draggable is dropped inside the dropzone, otherwise the draggable got outside the dropzone without beging dropped.

    • dropTarget HtmlElement

      The dropzone HtmlElement. Equals e.target

    • ctrlKey Boolean

      Whether the Ctrl/cmd key is pressed

    • isCopied Boolean

      Whether the drag is a copy-drag

    • [sourceNode] HtmlElement optional

      The original Element. Only when a copy is made --> e.dragNode is being moved while e.sourceNode stand at its place.

    • currentTarget HtmlElement

      the HtmlElement that is delegating the draggable

    • sourceTarget HtmlElement

      the deepest HtmlElement of the draggable where the mouse lies upon

    • dd Promise

      Promise that gets fulfilled when dragging is ended. The fullfilled-callback has no arguments.

    • xMouse Number

      the current x-position in the window-view

    • yMouse Number

      the current y-position in the window-view

    • clientX Number

      the current x-position in the window-view

    • clientY Number

      the current y-position in the window-view

    • xMouseOrigin Number

      the original x-position in the document when drag started (incl. scrollOffset)

    • yMouseOrigin Number

      the original y-position in the document when drag started (incl. scrollOffset)

    • [relatives] NodeList optional

      an optional list that the user could set in a before-subscriber of the dd-event to inform which nodes are related to the draggable node and should be dragged as well.

    • [relativeDragNodes] NodeList optional

      an optional list that holds the HtmlElements that corresponds with the e.relative list, but is a list with draggable Elements.

dd (extended by drag-drop)

Defined in src/drag-drop/drag-drop.js:88

Available since 0.0.1

Emitted when a draggable Element's drag-cycle starts. You can use a before-subscriber to specify e.relatives, which should be a nodelist with HtmlElements, that should be dragged togehter with the master draggable Element.

Event Payload:

  • e Object

    eventobject including:

    • target HtmlElement

      the HtmlElement that is being dragged

    • dragNode HtmlElement

      The HtmlElement that is being dragged (equals e.target)

    • [sourceNode] HtmlElement optional

      The original Element. Only when a copy is made --> e.dragNode is being moved while e.sourceNode stand at its place.

    • currentTarget HtmlElement

      the HtmlElement that is delegating

    • sourceTarget HtmlElement

      the deepest HtmlElement where the mouse lies upon

    • dd Promise

      Promise that gets fulfilled when dragging is ended. The fullfilled-callback has no arguments.

    • ctrlKey Boolean

      Whether the Ctrl/cmd key is pressed

    • isCopied Boolean

      Whether the drag is a copy-drag

    • xMouse Number

      the current x-position in the window-view

    • yMouse Number

      the current y-position in the window-view

    • clientX Number

      the current x-position in the window-view

    • clientY Number

      the current y-position in the window-view

    • xMouseOrigin Number

      the original x-position in the document when drag started (incl. scrollOffset)

    • yMouseOrigin Number

      the original y-position in the document when drag started (incl. scrollOffset)

    • [relatives] NodeList optional

      an optional list that the user could set in a before-subscriber of the dd-event to inform which nodes are related to the draggable node and should be dragged as well.

    • [relativeDragNodes] NodeList optional

      an optional list that holds the HtmlElements that corresponds with the e.relative list, but is a list with draggable Elements.

dd-fake-mousemove

private

Defined in src/drag-drop/drag-drop.js:908

Available since 0.1

Fired when the mouse comes back into the browser-window while dd-drag was busy yet no buttons are pressed. This is a correction to the fact that the mouseup-event wasn't noticed because the mouse was outside the browser.

dd-fake-mouseup

private

Provided by the drag module.

Defined in src/drag/drag.js:178

Available since 0.1

Fired when the mouse comes back into the browser-window while dd-drag was busy yet no buttons are pressed. This is a correction to the fact that the mouseup-event wasn't noticed because the mouse was outside the browser.