docs/source/DD.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5   <title>The source code</title>
   6   <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../prettify/prettify.js"></script>
   8   <style type="text/css">
   9     .highlight { display: block; background-color: #ddd; }
  10   </style>
  11   <script type="text/javascript">
  12     function highlight() {
  13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14     }
  15   </script>
  16 </head>
  17 <body onload="prettyPrint(); highlight();">
  18   <pre class="prettyprint lang-js">/*
  19  * This is a derivative of the similarly named class in the YUI Library.
  20  * The original license:
  21  * Copyright (c) 2006, Yahoo! Inc. All rights reserved.
  22  * Code licensed under the BSD License:
  23  * http://developer.yahoo.net/yui/license.txt
  24  */
  25
  26
  27 <span id='Ext-dd-DD-method-constructor'><span id='Ext-dd-DD'>/**
  28 </span></span> * @class Ext.dd.DD
  29  * A DragDrop implementation where the linked element follows the
  30  * mouse cursor during a drag.
  31  * @extends Ext.dd.DragDrop
  32  * @constructor
  33  * @param {String} id the id of the linked element
  34  * @param {String} sGroup the group of related DragDrop items
  35  * @param {object} config an object containing configurable attributes
  36  *                Valid properties for DD:
  37  *                    scroll
  38  */
  39
  40 Ext.define('Ext.dd.DD', {
  41     extend: 'Ext.dd.DragDrop',
  42     requires: ['Ext.dd.DragDropManager'],
  43     constructor: function(id, sGroup, config) {
  44         if (id) {
  45             this.init(id, sGroup, config);
  46         }
  47     },
  48
  49 <span id='Ext-dd-DD-property-scroll'>    /**
  50 </span>     * When set to true, the utility automatically tries to scroll the browser
  51      * window when a drag and drop element is dragged near the viewport boundary.
  52      * Defaults to true.
  53      * @property scroll
  54      * @type boolean
  55      */
  56     scroll: true,
  57
  58 <span id='Ext-dd-DD-method-autoOffset'>    /**
  59 </span>     * Sets the pointer offset to the distance between the linked element's top
  60      * left corner and the location the element was clicked
  61      * @method autoOffset
  62      * @param {int} iPageX the X coordinate of the click
  63      * @param {int} iPageY the Y coordinate of the click
  64      */
  65     autoOffset: function(iPageX, iPageY) {
  66         var x = iPageX - this.startPageX;
  67         var y = iPageY - this.startPageY;
  68         this.setDelta(x, y);
  69     },
  70
  71 <span id='Ext-dd-DD-method-setDelta'>    /**
  72 </span>     * Sets the pointer offset.  You can call this directly to force the
  73      * offset to be in a particular location (e.g., pass in 0,0 to set it
  74      * to the center of the object)
  75      * @method setDelta
  76      * @param {int} iDeltaX the distance from the left
  77      * @param {int} iDeltaY the distance from the top
  78      */
  79     setDelta: function(iDeltaX, iDeltaY) {
  80         this.deltaX = iDeltaX;
  81         this.deltaY = iDeltaY;
  82     },
  83
  84 <span id='Ext-dd-DD-method-setDragElPos'>    /**
  85 </span>     * Sets the drag element to the location of the mousedown or click event,
  86      * maintaining the cursor location relative to the location on the element
  87      * that was clicked.  Override this if you want to place the element in a
  88      * location other than where the cursor is.
  89      * @method setDragElPos
  90      * @param {int} iPageX the X coordinate of the mousedown or drag event
  91      * @param {int} iPageY the Y coordinate of the mousedown or drag event
  92      */
  93     setDragElPos: function(iPageX, iPageY) {
  94         // the first time we do this, we are going to check to make sure
  95         // the element has css positioning
  96
  97         var el = this.getDragEl();
  98         this.alignElWithMouse(el, iPageX, iPageY);
  99     },
 100
 101 <span id='Ext-dd-DD-method-alignElWithMouse'>    /**
 102 </span>     * Sets the element to the location of the mousedown or click event,
 103      * maintaining the cursor location relative to the location on the element
 104      * that was clicked.  Override this if you want to place the element in a
 105      * location other than where the cursor is.
 106      * @method alignElWithMouse
 107      * @param {HTMLElement} el the element to move
 108      * @param {int} iPageX the X coordinate of the mousedown or drag event
 109      * @param {int} iPageY the Y coordinate of the mousedown or drag event
 110      */
 111     alignElWithMouse: function(el, iPageX, iPageY) {
 112         var oCoord = this.getTargetCoord(iPageX, iPageY),
 113             fly = el.dom ? el : Ext.fly(el, '_dd'),
 114             elSize = fly.getSize(),
 115             EL = Ext.core.Element,
 116             vpSize;
 117
 118         if (!this.deltaSetXY) {
 119             vpSize = this.cachedViewportSize = { width: EL.getDocumentWidth(), height: EL.getDocumentHeight() };
 120             var aCoord = [
 121                 Math.max(0, Math.min(oCoord.x, vpSize.width - elSize.width)),
 122                 Math.max(0, Math.min(oCoord.y, vpSize.height - elSize.height))
 123             ];
 124             fly.setXY(aCoord);
 125             var newLeft = fly.getLeft(true);
 126             var newTop  = fly.getTop(true);
 127             this.deltaSetXY = [newLeft - oCoord.x, newTop - oCoord.y];
 128         } else {
 129             vpSize = this.cachedViewportSize;
 130             fly.setLeftTop(
 131                 Math.max(0, Math.min(oCoord.x + this.deltaSetXY[0], vpSize.width - elSize.width)),
 132                 Math.max(0, Math.min(oCoord.y + this.deltaSetXY[1], vpSize.height - elSize.height))
 133             );
 134         }
 135
 136         this.cachePosition(oCoord.x, oCoord.y);
 137         this.autoScroll(oCoord.x, oCoord.y, el.offsetHeight, el.offsetWidth);
 138         return oCoord;
 139     },
 140
 141 <span id='Ext-dd-DD-method-cachePosition'>    /**
 142 </span>     * Saves the most recent position so that we can reset the constraints and
 143      * tick marks on-demand.  We need to know this so that we can calculate the
 144      * number of pixels the element is offset from its original position.
 145      * @method cachePosition
 146      * @param iPageX the current x position (optional, this just makes it so we
 147      * don't have to look it up again)
 148      * @param iPageY the current y position (optional, this just makes it so we
 149      * don't have to look it up again)
 150      */
 151     cachePosition: function(iPageX, iPageY) {
 152         if (iPageX) {
 153             this.lastPageX = iPageX;
 154             this.lastPageY = iPageY;
 155         } else {
 156             var aCoord = Ext.core.Element.getXY(this.getEl());
 157             this.lastPageX = aCoord[0];
 158             this.lastPageY = aCoord[1];
 159         }
 160     },
 161
 162 <span id='Ext-dd-DD-method-autoScroll'>    /**
 163 </span>     * Auto-scroll the window if the dragged object has been moved beyond the
 164      * visible window boundary.
 165      * @method autoScroll
 166      * @param {int} x the drag element's x position
 167      * @param {int} y the drag element's y position
 168      * @param {int} h the height of the drag element
 169      * @param {int} w the width of the drag element
 170      * @private
 171      */
 172     autoScroll: function(x, y, h, w) {
 173
 174         if (this.scroll) {
 175             // The client height
 176             var clientH = Ext.core.Element.getViewHeight();
 177
 178             // The client width
 179             var clientW = Ext.core.Element.getViewWidth();
 180
 181             // The amt scrolled down
 182             var st = this.DDMInstance.getScrollTop();
 183
 184             // The amt scrolled right
 185             var sl = this.DDMInstance.getScrollLeft();
 186
 187             // Location of the bottom of the element
 188             var bot = h + y;
 189
 190             // Location of the right of the element
 191             var right = w + x;
 192
 193             // The distance from the cursor to the bottom of the visible area,
 194             // adjusted so that we don't scroll if the cursor is beyond the
 195             // element drag constraints
 196             var toBot = (clientH + st - y - this.deltaY);
 197
 198             // The distance from the cursor to the right of the visible area
 199             var toRight = (clientW + sl - x - this.deltaX);
 200
 201
 202             // How close to the edge the cursor must be before we scroll
 203             // var thresh = (document.all) ? 100 : 40;
 204             var thresh = 40;
 205
 206             // How many pixels to scroll per autoscroll op.  This helps to reduce
 207             // clunky scrolling. IE is more sensitive about this ... it needs this
 208             // value to be higher.
 209             var scrAmt = (document.all) ? 80 : 30;
 210
 211             // Scroll down if we are near the bottom of the visible page and the
 212             // obj extends below the crease
 213             if ( bot &gt; clientH &amp;&amp; toBot &lt; thresh ) {
 214                 window.scrollTo(sl, st + scrAmt);
 215             }
 216
 217             // Scroll up if the window is scrolled down and the top of the object
 218             // goes above the top border
 219             if ( y &lt; st &amp;&amp; st &gt; 0 &amp;&amp; y - st &lt; thresh ) {
 220                 window.scrollTo(sl, st - scrAmt);
 221             }
 222
 223             // Scroll right if the obj is beyond the right border and the cursor is
 224             // near the border.
 225             if ( right &gt; clientW &amp;&amp; toRight &lt; thresh ) {
 226                 window.scrollTo(sl + scrAmt, st);
 227             }
 228
 229             // Scroll left if the window has been scrolled to the right and the obj
 230             // extends past the left border
 231             if ( x &lt; sl &amp;&amp; sl &gt; 0 &amp;&amp; x - sl &lt; thresh ) {
 232                 window.scrollTo(sl - scrAmt, st);
 233             }
 234         }
 235     },
 236
 237 <span id='Ext-dd-DD-method-getTargetCoord'>    /**
 238 </span>     * Finds the location the element should be placed if we want to move
 239      * it to where the mouse location less the click offset would place us.
 240      * @method getTargetCoord
 241      * @param {int} iPageX the X coordinate of the click
 242      * @param {int} iPageY the Y coordinate of the click
 243      * @return an object that contains the coordinates (Object.x and Object.y)
 244      * @private
 245      */
 246     getTargetCoord: function(iPageX, iPageY) {
 247         var x = iPageX - this.deltaX;
 248         var y = iPageY - this.deltaY;
 249
 250         if (this.constrainX) {
 251             if (x &lt; this.minX) {
 252                 x = this.minX;
 253             }
 254             if (x &gt; this.maxX) {
 255                 x = this.maxX;
 256             }
 257         }
 258
 259         if (this.constrainY) {
 260             if (y &lt; this.minY) {
 261                 y = this.minY;
 262             }
 263             if (y &gt; this.maxY) {
 264                 y = this.maxY;
 265             }
 266         }
 267
 268         x = this.getTick(x, this.xTicks);
 269         y = this.getTick(y, this.yTicks);
 270
 271
 272         return {x: x, y: y};
 273     },
 274
 275 <span id='Ext-dd-DD-method-applyConfig'>    /**
 276 </span>     * Sets up config options specific to this class. Overrides
 277      * Ext.dd.DragDrop, but all versions of this method through the
 278      * inheritance chain are called
 279      */
 280     applyConfig: function() {
 281         this.callParent();
 282         this.scroll = (this.config.scroll !== false);
 283     },
 284
 285 <span id='Ext-dd-DD-method-b4MouseDown'>    /**
 286 </span>     * Event that fires prior to the onMouseDown event.  Overrides
 287      * Ext.dd.DragDrop.
 288      */
 289     b4MouseDown: function(e) {
 290         // this.resetConstraints();
 291         this.autoOffset(e.getPageX(), e.getPageY());
 292     },
 293
 294 <span id='Ext-dd-DD-method-b4Drag'>    /**
 295 </span>     * Event that fires prior to the onDrag event.  Overrides
 296      * Ext.dd.DragDrop.
 297      */
 298     b4Drag: function(e) {
 299         this.setDragElPos(e.getPageX(), e.getPageY());
 300     },
 301
 302     toString: function() {
 303         return (&quot;DD &quot; + this.id);
 304     }
 305
 306     //////////////////////////////////////////////////////////////////////////
 307     // Debugging ygDragDrop events that can be overridden
 308     //////////////////////////////////////////////////////////////////////////
 309     /*
 310     startDrag: function(x, y) {
 311     },
 312
 313     onDrag: function(e) {
 314     },
 315
 316     onDragEnter: function(e, id) {
 317     },
 318
 319     onDragOver: function(e, id) {
 320     },
 321
 322     onDragOut: function(e, id) {
 323     },
 324
 325     onDragDrop: function(e, id) {
 326     },
 327
 328     endDrag: function(e) {
 329     }
 330
 331     */
 332
 333 });
 334 </pre>
 335 </body>
 336 </html>