3 This file is part of Ext JS 4
5 Copyright (c) 2011 Sencha Inc
7 Contact: http://www.sencha.com/contact
9 GNU General Public License Usage
10 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.
12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
16 * @class Ext.util.ComponentDragger
17 * @extends Ext.dd.DragTracker
18 * <p>A subclass of Ext.dd.DragTracker which handles dragging any Component.</p>
19 * <p>This is configured with a Component to be made draggable, and a config object for the
20 * {@link Ext.dd.DragTracker} class.</p>
21 * <p>A {@link #delegate} may be provided which may be either the element to use as the mousedown target
22 * or a {@link Ext.DomQuery} selector to activate multiple mousedown targets.</p>
24 Ext.define('Ext.util.ComponentDragger', {
27 * @cfg {Boolean} constrain
28 * Specify as <code>true</code> to constrain the Component to within the bounds of the {@link #constrainTo} region.
32 * @cfg {String/Ext.Element} delegate
33 * Optional. <p>A {@link Ext.DomQuery DomQuery} selector which identifies child elements within the Component's encapsulating
34 * Element which are the drag handles. This limits dragging to only begin when the matching elements are mousedowned.</p>
35 * <p>This may also be a specific child element within the Component's encapsulating element to use as the drag handle.</p>
39 * @cfg {Boolean} constrainDelegate
40 * Specify as <code>true</code> to constrain the drag handles within the {@link #constrainTo} region.
43 extend: 'Ext.dd.DragTracker',
48 * Creates new ComponentDragger.
49 * @param {Object} comp The Component to provide dragging for.
50 * @param {Object} config (optional) Config object
52 constructor: function(comp, config) {
54 this.initialConstrainTo = config.constrainTo;
55 this.callParent([ config ]);
58 onStart: function(e) {
62 // Cache the start [X, Y] array
63 this.startPosition = comp.getPosition();
65 // If client Component has a ghost method to show a lightweight version of itself
66 // then use that as a drag proxy unless configured to liveDrag.
67 if (comp.ghost && !comp.liveDrag) {
68 me.proxy = comp.ghost();
69 me.dragTarget = me.proxy.header.el;
72 // Set the constrainTo Region before we start dragging.
73 if (me.constrain || me.constrainDelegate) {
74 me.constrainTo = me.calculateConstrainRegion();
78 calculateConstrainRegion: function() {
81 c = me.initialConstrainTo,
84 shadowSize = comp.el.shadow ? comp.el.shadow.offset : 0;
86 // The configured constrainTo might be a Region or an element
87 if (!(c instanceof Ext.util.Region)) {
88 c = Ext.fly(c).getViewRegion();
91 // Reduce the constrain region to allow for shadow
93 c.adjust(0, -shadowSize, -shadowSize, shadowSize);
96 // If they only want to constrain the *delegate* to within the constrain region,
97 // adjust the region to be larger based on the insets of the delegate from the outer
98 // edges of the Component.
99 if (!me.constrainDelegate) {
100 delegateRegion = Ext.fly(me.dragTarget).getRegion();
101 elRegion = me.proxy ? me.proxy.el.getRegion() : comp.el.getRegion();
104 delegateRegion.top - elRegion.top,
105 delegateRegion.right - elRegion.right,
106 delegateRegion.bottom - elRegion.bottom,
107 delegateRegion.left - elRegion.left
113 // Move either the ghost Component or the target Component to its new position on drag
114 onDrag: function(e) {
116 comp = (me.proxy && !me.comp.liveDrag) ? me.proxy : me.comp,
117 offset = me.getOffset(me.constrain || me.constrainDelegate ? 'dragTarget' : null);
119 comp.setPosition(me.startPosition[0] + offset[0], me.startPosition[1] + offset[1]);
123 if (this.proxy && !this.comp.liveDrag) {