Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

Node drag events (gallery-event-drag) on cdn

Last Updated: 02/9/11

+ 1 -

Luke Smith

YUI Developer

See 19 more by this user.

Created: 10/31/09
Last CDN Push: 11/2/09
Build Tag: gallery-2009.11.02-20
Project: YUI 3
License: YUI BSD
YUI Version: 3.3.0
Free for use.

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.

Code Sample

<script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script>

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2009.11.02-20'
}).use('gallery-event-drag', function(Y) {
 
    // 'this' in the callback is the Node
    function report(e) {
        Y.log( this.getXY() );
    }
 
    // Make all elements with class "draggable" draggable, and subscribe to their end event
    Y.all('.draggable').on('drag:end', report);
 
    // Makes the node draggable and adds Y.Plugin.DDProxy *if* dd-proxy is also use()d
    // and Y.Plugin.DDConstrained with the included config *if* dd-constrain is also use()d
    Y.one('#constrained').on('drag', report, {
        data: "sets data attribute on the Drag instance",
        proxy: true,
        constrained: {
            constrain2node: '#outer',
            gutter: '5'
        }
    });
 
});

Forum Posts

No forum posts for this module.