/*
This file is part of Ext JS 4.2
Copyright (c) 2011-2013 Sencha Inc
Contact: http://www.sencha.com/contact
GNU General Public License Usage
This file may be used under the terms of the GNU General Public License version 3.0 as
published by the Free Software Foundation and appearing in the file LICENSE included in the
packaging of this file.
Please review the following information to ensure the GNU General Public License version 3.0
requirements will be met: http://www.gnu.org/copyleft/gpl.html.
If you are unsure which license is appropriate for your use, please contact the sales department
at http://www.sencha.com/contact.
Build date: 2013-05-16 14:36:50 (f9be68accb407158ba2b1be2c226a6ce1f649314)
*/
/*
* This is a derivative of the similarly named class in the YUI Library.
* The original license:
* Copyright (c) 2006, Yahoo! Inc. All rights reserved.
* Code licensed under the BSD License:
* http://developer.yahoo.net/yui/license.txt
*/
/**
* A DragDrop implementation where the linked element follows the
* mouse cursor during a drag.
*/
Ext.define('Ext.dd.DD', {
extend: 'Ext.dd.DragDrop',
requires: ['Ext.dd.DragDropManager'],
/**
* Creates new DD instance.
* @param {String} id the id of the linked element
* @param {String} sGroup the group of related DragDrop items
* @param {Object} config an object containing configurable attributes.
* Valid properties for DD: scroll
*/
constructor: function(id, sGroup, config) {
if (id) {
this.init(id, sGroup, config);
}
},
/**
* @property {Boolean} scroll
* When set to true, the utility automatically tries to scroll the browser
* window when a drag and drop element is dragged near the viewport boundary.
*/
scroll: true,
/**
* Sets the pointer offset to the distance between the linked element's top
* left corner and the location the element was clicked.
* @param {Number} iPageX the X coordinate of the click
* @param {Number} iPageY the Y coordinate of the click
*/
autoOffset: function(iPageX, iPageY) {
var x = iPageX - this.startPageX,
y = iPageY - this.startPageY;
this.setDelta(x, y);
},
/**
* Sets the pointer offset. You can call this directly to force the
* offset to be in a particular location (e.g., pass in 0,0 to set it
* to the center of the object)
* @param {Number} iDeltaX the distance from the left
* @param {Number} iDeltaY the distance from the top
*/
setDelta: function(iDeltaX, iDeltaY) {
this.deltaX = iDeltaX;
this.deltaY = iDeltaY;
},
/**
* Sets the drag element to the location of the mousedown or click event,
* maintaining the cursor location relative to the location on the element
* that was clicked. Override this if you want to place the element in a
* location other than where the cursor is.
* @param {Number} iPageX the X coordinate of the mousedown or drag event
* @param {Number} iPageY the Y coordinate of the mousedown or drag event
*/
setDragElPos: function(iPageX, iPageY) {
// the first time we do this, we are going to check to make sure
// the element has css positioning
var el = this.getDragEl();
this.alignElWithMouse(el, iPageX, iPageY);
},
/**
* Sets the element to the location of the mousedown or click event,
* maintaining the cursor location relative to the location on the element
* that was clicked. Override this if you want to place the element in a
* location other than where the cursor is.
* @param {HTMLElement} el the element to move
* @param {Number} iPageX the X coordinate of the mousedown or drag event
* @param {Number} iPageY the Y coordinate of the mousedown or drag event
*/
alignElWithMouse: function(el, iPageX, iPageY) {
var oCoord = this.getTargetCoord(iPageX, iPageY),
fly = el.dom ? el : Ext.fly(el, '_dd'),
elSize = fly.getSize(),
EL = Ext.Element,
vpSize,
aCoord,
newLeft,
newTop;
if (!this.deltaSetXY) {
vpSize = this.cachedViewportSize = { width: EL.getDocumentWidth(), height: EL.getDocumentHeight() };
aCoord = [
Math.max(0, Math.min(oCoord.x, vpSize.width - elSize.width)),
Math.max(0, Math.min(oCoord.y, vpSize.height - elSize.height))
];
fly.setXY(aCoord);
newLeft = this.getLocalX(fly);
newTop = fly.getLocalY();
this.deltaSetXY = [newLeft - oCoord.x, newTop - oCoord.y];
} else {
vpSize = this.cachedViewportSize;
this.setLocalXY(
fly,
Math.max(0, Math.min(oCoord.x + this.deltaSetXY[0], vpSize.width - elSize.width)),
Math.max(0, Math.min(oCoord.y + this.deltaSetXY[1], vpSize.height - elSize.height))
);
}
this.cachePosition(oCoord.x, oCoord.y);
this.autoScroll(oCoord.x, oCoord.y, el.offsetHeight, el.offsetWidth);
return oCoord;
},
/**
* Saves the most recent position so that we can reset the constraints and
* tick marks on-demand. We need to know this so that we can calculate the
* number of pixels the element is offset from its original position.
*
* @param {Number} [iPageX] the current x position (this just makes it so we
* don't have to look it up again)
* @param {Number} [iPageY] the current y position (this just makes it so we
* don't have to look it up again)
*/
cachePosition: function(iPageX, iPageY) {
if (iPageX) {
this.lastPageX = iPageX;
this.lastPageY = iPageY;
} else {
var aCoord = Ext.Element.getXY(this.getEl());
this.lastPageX = aCoord[0];
this.lastPageY = aCoord[1];
}
},
/**
* Auto-scroll the window if the dragged object has been moved beyond the
* visible window boundary.
* @param {Number} x the drag element's x position
* @param {Number} y the drag element's y position
* @param {Number} h the height of the drag element
* @param {Number} w the width of the drag element
* @private
*/
autoScroll: function(x, y, h, w) {
if (this.scroll) {
// The client height
var clientH = Ext.Element.getViewHeight(),
// The client width
clientW = Ext.Element.getViewWidth(),
// The amt scrolled down
st = this.DDMInstance.getScrollTop(),
// The amt scrolled right
sl = this.DDMInstance.getScrollLeft(),
// Location of the bottom of the element
bot = h + y,
// Location of the right of the element
right = w + x,
// The distance from the cursor to the bottom of the visible area,
// adjusted so that we don't scroll if the cursor is beyond the
// element drag constraints
toBot = (clientH + st - y - this.deltaY),
// The distance from the cursor to the right of the visible area
toRight = (clientW + sl - x - this.deltaX),
// How close to the edge the cursor must be before we scroll
// var thresh = (document.all) ? 100 : 40;
thresh = 40,
// How many pixels to scroll per autoscroll op. This helps to reduce
// clunky scrolling. IE is more sensitive about this ... it needs this
// value to be higher.
scrAmt = (document.all) ? 80 : 30;
// Scroll down if we are near the bottom of the visible page and the
// obj extends below the crease
if ( bot > clientH && toBot < thresh ) {
window.scrollTo(sl, st + scrAmt);
}
// Scroll up if the window is scrolled down and the top of the object
// goes above the top border
if ( y < st && st > 0 && y - st < thresh ) {
window.scrollTo(sl, st - scrAmt);
}
// Scroll right if the obj is beyond the right border and the cursor is
// near the border.
if ( right > clientW && toRight < thresh ) {
window.scrollTo(sl + scrAmt, st);
}
// Scroll left if the window has been scrolled to the right and the obj
// extends past the left border
if ( x < sl && sl > 0 && x - sl < thresh ) {
window.scrollTo(sl - scrAmt, st);
}
}
},
/**
* Finds the location the element should be placed if we want to move
* it to where the mouse location less the click offset would place us.
* @param {Number} iPageX the X coordinate of the click
* @param {Number} iPageY the Y coordinate of the click
* @return {Object} An object that contains the coordinates (Object.x and Object.y)
* @return {Number} return.x
* @return {Number} return.y
* @private
*/
getTargetCoord: function(iPageX, iPageY) {
var x = iPageX - this.deltaX,
y = iPageY - this.deltaY;
if (this.constrainX) {
if (x < this.minX) {
x = this.minX;
}
if (x > this.maxX) {
x = this.maxX;
}
}
if (this.constrainY) {
if (y < this.minY) {
y = this.minY;
}
if (y > this.maxY) {
y = this.maxY;
}
}
x = this.getTick(x, this.xTicks);
y = this.getTick(y, this.yTicks);
return {x: x, y: y};
},
/**
* Sets up config options specific to this class. Overrides
* Ext.dd.DragDrop, but all versions of this method through the
* inheritance chain are called
*/
applyConfig: function() {
this.callParent();
this.scroll = (this.config.scroll !== false);
},
/**
* Event that fires prior to the onMouseDown event. Overrides
* Ext.dd.DragDrop.
*/
b4MouseDown: function(e) {
// this.resetConstraints();
this.autoOffset(e.getPageX(), e.getPageY());
},
/**
* Event that fires prior to the onDrag event. Overrides
* Ext.dd.DragDrop.
*/
b4Drag: function(e) {
this.setDragElPos(e.getPageX(), e.getPageY());
},
toString: function() {
return ("DD " + this.id);
},
getLocalX: function(el) {
return el.getLocalX();
},
setLocalXY: function(el, x, y) {
el.setLocalXY(x, y);
}
//////////////////////////////////////////////////////////////////////////
// Debugging ygDragDrop events that can be overridden
//////////////////////////////////////////////////////////////////////////
/*
startDrag: function(x, y) {
},
onDrag: function(e) {
},
onDragEnter: function(e, id) {
},
onDragOver: function(e, id) {
},
onDragOut: function(e, id) {
},
onDragDrop: function(e, id) {
},
endDrag: function(e) {
}
*/
});
|
Download
