DDProxy.html 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
  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="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  7. <script type="text/javascript" src="../resources/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. <span id='Ext-dd-DDProxy'>/**
  26. </span> * A DragDrop implementation that inserts an empty, bordered div into
  27. * the document that follows the cursor during drag operations. At the time of
  28. * the click, the frame div is resized to the dimensions of the linked html
  29. * element, and moved to the exact location of the linked element.
  30. *
  31. * References to the &quot;frame&quot; element refer to the single proxy element that
  32. * was created to be dragged in place of all DDProxy elements on the
  33. * page.
  34. */
  35. Ext.define('Ext.dd.DDProxy', {
  36. extend: 'Ext.dd.DD',
  37. statics: {
  38. <span id='Ext-dd-DDProxy-static-property-dragElId'> /**
  39. </span> * The default drag frame div id
  40. * @static
  41. */
  42. dragElId: &quot;ygddfdiv&quot;
  43. },
  44. <span id='Ext-dd-DDProxy-method-constructor'> /**
  45. </span> * Creates new DDProxy.
  46. * @param {String} id the id of the linked html element
  47. * @param {String} sGroup the group of related DragDrop objects
  48. * @param {Object} config an object containing configurable attributes.
  49. * Valid properties for DDProxy in addition to those in DragDrop:
  50. *
  51. * - resizeFrame
  52. * - centerFrame
  53. * - dragElId
  54. */
  55. constructor: function(id, sGroup, config) {
  56. if (id) {
  57. this.init(id, sGroup, config);
  58. this.initFrame();
  59. }
  60. },
  61. <span id='Ext-dd-DDProxy-property-resizeFrame'> /**
  62. </span> * @property {Boolean} resizeFrame
  63. * By default we resize the drag frame to be the same size as the element
  64. * we want to drag (this is to get the frame effect). We can turn it off
  65. * if we want a different behavior.
  66. */
  67. resizeFrame: true,
  68. <span id='Ext-dd-DDProxy-property-centerFrame'> /**
  69. </span> * @property {Boolean} centerFrame
  70. * By default the frame is positioned exactly where the drag element is, so
  71. * we use the cursor offset provided by Ext.dd.DD. Another option that works only if
  72. * you do not have constraints on the obj is to have the drag frame centered
  73. * around the cursor. Set centerFrame to true for this effect.
  74. */
  75. centerFrame: false,
  76. <span id='Ext-dd-DDProxy-method-createFrame'> /**
  77. </span> * Creates the proxy element if it does not yet exist
  78. */
  79. createFrame: function() {
  80. var self = this,
  81. body = document.body,
  82. div,
  83. s;
  84. if (!body || !body.firstChild) {
  85. setTimeout( function() { self.createFrame(); }, 50 );
  86. return;
  87. }
  88. div = this.getDragEl();
  89. if (!div) {
  90. div = document.createElement(&quot;div&quot;);
  91. div.id = this.dragElId;
  92. s = div.style;
  93. s.position = &quot;absolute&quot;;
  94. s.visibility = &quot;hidden&quot;;
  95. s.cursor = &quot;move&quot;;
  96. s.border = &quot;2px solid #aaa&quot;;
  97. s.zIndex = 999;
  98. // appendChild can blow up IE if invoked prior to the window load event
  99. // while rendering a table. It is possible there are other scenarios
  100. // that would cause this to happen as well.
  101. body.insertBefore(div, body.firstChild);
  102. }
  103. },
  104. <span id='Ext-dd-DDProxy-method-initFrame'> /**
  105. </span> * Initialization for the drag frame element. Must be called in the
  106. * constructor of all subclasses
  107. */
  108. initFrame: function() {
  109. this.createFrame();
  110. },
  111. applyConfig: function() {
  112. this.callParent();
  113. this.resizeFrame = (this.config.resizeFrame !== false);
  114. this.centerFrame = (this.config.centerFrame);
  115. this.setDragElId(this.config.dragElId || Ext.dd.DDProxy.dragElId);
  116. },
  117. <span id='Ext-dd-DDProxy-method-showFrame'> /**
  118. </span> * Resizes the drag frame to the dimensions of the clicked object, positions
  119. * it over the object, and finally displays it
  120. * @param {Number} iPageX X click position
  121. * @param {Number} iPageY Y click position
  122. * @private
  123. */
  124. showFrame: function(iPageX, iPageY) {
  125. var el = this.getEl(),
  126. dragEl = this.getDragEl(),
  127. s = dragEl.style;
  128. this._resizeProxy();
  129. if (this.centerFrame) {
  130. this.setDelta( Math.round(parseInt(s.width, 10)/2),
  131. Math.round(parseInt(s.height, 10)/2) );
  132. }
  133. this.setDragElPos(iPageX, iPageY);
  134. Ext.fly(dragEl).show();
  135. },
  136. <span id='Ext-dd-DDProxy-method-_resizeProxy'> /**
  137. </span> * The proxy is automatically resized to the dimensions of the linked
  138. * element when a drag is initiated, unless resizeFrame is set to false
  139. * @private
  140. */
  141. _resizeProxy: function() {
  142. if (this.resizeFrame) {
  143. var el = this.getEl();
  144. Ext.fly(this.getDragEl()).setSize(el.offsetWidth, el.offsetHeight);
  145. }
  146. },
  147. // overrides Ext.dd.DragDrop
  148. b4MouseDown: function(e) {
  149. var x = e.getPageX(),
  150. y = e.getPageY();
  151. this.autoOffset(x, y);
  152. this.setDragElPos(x, y);
  153. },
  154. // overrides Ext.dd.DragDrop
  155. b4StartDrag: function(x, y) {
  156. // show the drag frame
  157. this.showFrame(x, y);
  158. },
  159. // overrides Ext.dd.DragDrop
  160. b4EndDrag: function(e) {
  161. Ext.fly(this.getDragEl()).hide();
  162. },
  163. // overrides Ext.dd.DragDrop
  164. // By default we try to move the element to the last location of the frame.
  165. // This is so that the default behavior mirrors that of Ext.dd.DD.
  166. endDrag: function(e) {
  167. var lel = this.getEl(),
  168. del = this.getDragEl();
  169. // Show the drag frame briefly so we can get its position
  170. del.style.visibility = &quot;&quot;;
  171. this.beforeMove();
  172. // Hide the linked element before the move to get around a Safari
  173. // rendering bug.
  174. lel.style.visibility = &quot;hidden&quot;;
  175. Ext.dd.DDM.moveToEl(lel, del);
  176. del.style.visibility = &quot;hidden&quot;;
  177. lel.style.visibility = &quot;&quot;;
  178. this.afterDrag();
  179. },
  180. beforeMove : function(){
  181. },
  182. afterDrag : function(){
  183. },
  184. toString: function() {
  185. return (&quot;DDProxy &quot; + this.id);
  186. }
  187. });
  188. </pre>
  189. </body>
  190. </html>