drop.js revision fe9b360fbba5ff31e2640b73a2826010d9c7ca28
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * The Drag & Drop Utility allows you to create a draggable interface efficiently, buffering you from browser-level abnormalities and enabling you to focus on the interesting logic surrounding your particular implementation. This component enables you to create a variety of standard draggable objects with just a few lines of code and then, using its extensive API, add your own specific implementation logic.
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @submodule dd-drop
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * This class provides the ability to create a Drop Target.
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @class Drop
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @extends Base
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @constructor
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @namespace DD
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @event drop:over
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @description Fires when a drag element is over this target.
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @bubbles DDM
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @type {Event.Custom}
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @event drop:enter
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @description Fires when a drag element enters this target.
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @bubbles DDM
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @type {Event.Custom}
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @event drop:exit
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @description Fires when a drag element exits this target.
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore * @bubbles DDM
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @type {Event.Custom}
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @event drop:hit
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore * @description Fires when a draggable node is dropped on this Drop Target. (Fired from dd-ddm-drop)
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore * @bubbles DDM
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore * @type {Event.Custom}
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore Drop = function() {
028efd1c560953673904369fe3f2592de7103b8cGarrett D'Amore Drop.superclass.constructor.apply(this, arguments);
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore //DD init speed up.
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore if (Dom.getStyle(this.el, 'position') == 'fixed') {
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore Event.on(window, 'scroll', function() {
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore this.activateShim();
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore }, this, true);
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore * @attribute node
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore * @description Y.Node instanace to use as the element to make a Drop Target
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore Y.error('DD.Drop: Invalid Node Given: ' + node);
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @attribute groups
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @description Array of groups to add this drop into.
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @type Array
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore setter: function(g) {
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore Y.each(g, function(v, k) {
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore this._groups[v] = true;
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @attribute padding
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @description CSS style padding to make the Drop Target bigger than the node.
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @type String
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore setter: function(p) {
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @attribute lock
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @description Set to lock this drop element.
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @type Boolean
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore this.get(NODE).addClass(DDM.CSS_PREFIX + '-drop-locked');
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore this.get(NODE).removeClass(DDM.CSS_PREFIX + '-drop-locked');
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore * @attribute bubbles
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore * @description Controls the default bubble parent for this Drop instance. Default: Y.DD.DDM. Set to false to disable bubbling.
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore * @type Object
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore * @method _createEvents
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore * @description This method creates all the events for this Event Target and publishes them so we get Event Bubbling.
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore * @property _valid
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore * @description Flag for determining if the target is valid in this operation.
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore * @type Boolean
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore * @property _groups
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore * @description The groups this target belongs to.
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore * @type Array
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore * @property shim
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore * @description Node reference to the targets shim
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore * @type {Object}
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore * @property region
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @description A region object associated with this target, used for checking regions while dragging.
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @type Object
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @property overTarget
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @description This flag is tripped when a drag element is over this target.
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore * @type Boolean
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @method inGroup
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @description Check if this target is in one of the supplied groups.
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @param {Array} groups The groups to check against
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @return Boolean
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore if (this._groups[v]) {
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @method initializer
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @description Private lifecycle method
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore //this._createEvents();
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @method destructor
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @description Lifecycle destructor, unreg the drag from the DDM and remove listeners
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore this.shim.get('parentNode').removeChild(this.shim);
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore this.get(NODE).removeClass(DDM.CSS_PREFIX + '-drop');
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore * @method _deactivateShim
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @description Removes classes from the target, resets some flags and sets the shims deactive position [-999, -999]
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore return false;
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore this.get(NODE).removeClass(DDM.CSS_PREFIX + '-drop-active-valid');
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore this.get(NODE).removeClass(DDM.CSS_PREFIX + '-drop-active-invalid');
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore this.get(NODE).removeClass(DDM.CSS_PREFIX + '-drop-over');
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore * @method _activateShim
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore * @description Activates the shim and adds some interaction CSS classes
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore return false; //Nothing is dragging, no reason to activate.
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore if (this.get(NODE) === DDM.activeDrag.get(NODE)) {
this.overTarget = false;
this.sizeShim();
* @description Positions and sizes the shim with the raw data from the node, this can be used to programatically adjust the Targets shim for Animation..
sizeShim: function() {
if (!this.shim) {
this.region = {
_createShim: function() {
if (this.shim) {
s.setStyles({
this.shim = s;
_handleTargetOver: function() {
if (this.overTarget) {
this.overTarget = true;
this._handleOut();
_handleOverEvent: function() {
_handleOutEvent: function() {
if (this.overTarget) {
this.overTarget = false;
if (!force) {