Home
Featured
Popular
New
All
FAQ
Developer FAQ
Developer Guide
Module Setup
Luke Smith
YUI Developer
Last CDN Push: 11/2/09
Build Tag: gallery-2009.11.02-20
Project: YUI 3
License: YUI BSD
YUI Version: 3.0.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
YUI({
modules: {
'gallery-event-drag': {
fullpath: 'http://yui.yahooapis.com/gallery-2009.11.02-20/build/gallery-event-drag/gallery-event-drag-min.js',
requires: ['dd-plugin'],
optional: ['dd-proxy','dd-constrain'],
supersedes: []
}
}
}).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.
YUI Projects
Contribute
© 2010 YUI Library - Site Credits