API Docs for:
Show:

YUI~event-drag Class

Provides subscribable drag events from Node or NodeLists. Subscribing to any of the events causes the node to be plugged with Y.Plugin.Drag. The config object passed can be used to set Drag instance attributes or add additional Plugins to the Drag instance such as Y.Plugin.DDProxy.

Config properties are formatted and tested for a corresponding Y.Plugin.* as 'somePlugin' => Y.Plugin.DDSomePlugin if the property name doesn't already start with "DD". So { proxy: true } and { DDProxy: true } are functionally equivalent. Both add Y.Plugin.DDProxy to the Drag instance.

node.on('drag:start', fn, { proxy: true, data: 123 });

This adds Y.Plugin.DDProxy to the Drag instance and also set's the Drag instance's data attribute.

Passing any value will result in the Plugin being added, but if you pass an object literal as the value, it will be sent to the Plugin's constructor.

node.on('drag:end', fn, {
    constrained: { constrain2node: '#container' }
});

This adds Y.Plugin.DDConstrained to the Drag instance using the specified configuration.

A custom detach handle is returned, whose detach method unplugs the Y.Plugin.Drag from the node(s).

Supported events are:

  • drag or drag:drag
  • drag:start
  • drag:end
  • drag:mouseDown
  • drag:afterMouseDown
  • drag:removeHandle
  • drag:addHandle
  • drag:removeInvalid
  • drag:addInvalid
  • drag:align

Additionally, the default callback context is overridden to the subscribing Node unless otherwise specified during the subscription. So "this" in the callback will refer to the node. On the event object passed to subscribers, e.currentTarget is also the Node regardless of context override. The Drag instance is available from the Node as node.dd.

Methods

Y.Node.DOM_EVENTS.drag._applyConfig

(
  • dd
  • conf
)
protected

Applies the attribute values from the config object to the Drag instance. Also checks for loaded Plugins by the name of the property to apply.

Parameters:

  • dd Y.Plugin.Drag

    the Drag plugin for the node

  • conf Object

    the attribute configuration

Y.Node.DOM_EVENTS.drag._getNodes

(
  • el
)
protected

Normalizes the third param of on() to a NodeList. The resulting list may be empty.

Parameters:

  • el String | Node | NodeList | HTMLElement | Array

    valid context for on()

Returns:

NodeList

Events

drag

Also "drag:drag". Subscribes to the respective event on the generated Drag instance.

Event Payload:

  • type String

    'drag'

  • fn Function

    the callback function

  • id String | Node | etc

    the element to bind (typically document)

  • conf Object

    (optional) configuration to pass to Drag constructor

drag:addHandle

Subscribes to the respective event on the generated Drag instance.

Event Payload:

  • type String

    'drag:addHandle'

  • fn Function

    the callback function

  • id String | Node | etc

    the element to bind (typically document)

  • conf Object

    (optional) configuration to pass to Drag constructor

drag:addInvalid

Subscribes to the respective event on the generated Drag instance.

Event Payload:

  • type String

    'drag:addInvalid'

  • fn Function

    the callback function

  • id String | Node | etc

    the element to bind (typically document)

  • conf Object

    (optional) configuration to pass to Drag constructor

drag:afterMouseDown

Subscribes to the respective event on the generated Drag instance.

Event Payload:

  • type String

    'drag:afterMouseDown'

  • fn Function

    the callback function

  • id String | Node | etc

    the element to bind (typically document)

  • conf Object

    (optional) configuration to pass to Drag constructor

drag:align

Subscribes to the respective event on the generated Drag instance.

Event Payload:

  • type String

    'drag:align'

  • fn Function

    the callback function

  • id String | Node | etc

    the element to bind (typically document)

  • conf Object

    (optional) configuration to pass to Drag constructor

drag:end

Subscribes to the respective event on the generated Drag instance.

Event Payload:

  • type String

    'drag:end'

  • fn Function

    the callback function

  • id String | Node | etc

    the element to bind (typically document)

  • conf Object

    (optional) configuration to pass to Drag constructor

drag:mouseDown

Subscribes to the respective event on the generated Drag instance.

Event Payload:

  • type String

    'drag:mouseDown'

  • fn Function

    the callback function

  • id String | Node | etc

    the element to bind (typically document)

  • conf Object

    (optional) configuration to pass to Drag constructor

drag:removeHandle

Subscribes to the respective event on the generated Drag instance.

Event Payload:

  • type String

    'drag:removeHandle'

  • fn Function

    the callback function

  • id String | Node | etc

    the element to bind (typically document)

  • conf Object

    (optional) configuration to pass to Drag constructor

drag:removeInvalid

Subscribes to the respective event on the generated Drag instance.

Event Payload:

  • type String

    'drag:removeInvalid'

  • fn Function

    the callback function

  • id String | Node | etc

    the element to bind (typically document)

  • conf Object

    (optional) configuration to pass to Drag constructor

drag:start

Subscribes to the respective event on the generated Drag instance.

Event Payload:

  • type String

    'drag:start'

  • fn Function

    the callback function

  • id String | Node | etc

    the element to bind (typically document)

  • conf Object

    (optional) configuration to pass to Drag constructor