/ext-4.1.0_b3/docs/source/DragSource.html

https://bitbucket.org/srogerf/javascript · HTML · 410 lines · 370 code · 40 blank · 0 comment · 0 complexity · f4a1982c93acf527f46cd4b98e171580 MD5 · raw file

  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"><span id='Ext-dd-DragSource'>/**
  19. </span> * A simple class that provides the basic implementation needed to make any element draggable.
  20. */
  21. Ext.define('Ext.dd.DragSource', {
  22. extend: 'Ext.dd.DDProxy',
  23. requires: [
  24. 'Ext.dd.StatusProxy',
  25. 'Ext.dd.DragDropManager'
  26. ],
  27. <span id='Ext-dd-DragSource-cfg-ddGroup'> /**
  28. </span> * @cfg {String} ddGroup
  29. * A named drag drop group to which this object belongs. If a group is specified, then this object will only
  30. * interact with other drag drop objects in the same group.
  31. */
  32. <span id='Ext-dd-DragSource-cfg-dropAllowed'> /**
  33. </span> * @cfg {String} dropAllowed
  34. * The CSS class returned to the drag source when drop is allowed.
  35. */
  36. dropAllowed : Ext.baseCSSPrefix + 'dd-drop-ok',
  37. <span id='Ext-dd-DragSource-cfg-dropNotAllowed'> /**
  38. </span> * @cfg {String} dropNotAllowed
  39. * The CSS class returned to the drag source when drop is not allowed.
  40. */
  41. dropNotAllowed : Ext.baseCSSPrefix + 'dd-drop-nodrop',
  42. <span id='Ext-dd-DragSource-cfg-animRepair'> /**
  43. </span> * @cfg {Boolean} animRepair
  44. * If true, animates the proxy element back to the position of the handle element used to trigger the drag.
  45. */
  46. animRepair: true,
  47. <span id='Ext-dd-DragSource-cfg-repairHighlightColor'> /**
  48. </span> * @cfg {String} repairHighlightColor
  49. * The color to use when visually highlighting the drag source in the afterRepair
  50. * method after a failed drop (defaults to light blue). The color must be a 6 digit hex value, without
  51. * a preceding '#'.
  52. */
  53. repairHighlightColor: 'c3daf9',
  54. <span id='Ext-dd-DragSource-method-constructor'> /**
  55. </span> * Creates new drag-source.
  56. * @param {String/HTMLElement/Ext.Element} el The container element or ID of it.
  57. * @param {Object} config (optional) Config object.
  58. */
  59. constructor: function(el, config) {
  60. this.el = Ext.get(el);
  61. if(!this.dragData){
  62. this.dragData = {};
  63. }
  64. Ext.apply(this, config);
  65. if(!this.proxy){
  66. this.proxy = new Ext.dd.StatusProxy({
  67. id: this.el.id + '-drag-status-proxy',
  68. animRepair: this.animRepair
  69. });
  70. }
  71. this.callParent([this.el.dom, this.ddGroup || this.group,
  72. {dragElId : this.proxy.id, resizeFrame: false, isTarget: false, scroll: this.scroll === true}]);
  73. this.dragging = false;
  74. },
  75. <span id='Ext-dd-DragSource-method-getDragData'> /**
  76. </span> * Returns the data object associated with this drag source
  77. * @return {Object} data An object containing arbitrary data
  78. */
  79. getDragData : function(e){
  80. return this.dragData;
  81. },
  82. // private
  83. onDragEnter : function(e, id){
  84. var target = Ext.dd.DragDropManager.getDDById(id);
  85. this.cachedTarget = target;
  86. if (this.beforeDragEnter(target, e, id) !== false) {
  87. if (target.isNotifyTarget) {
  88. var status = target.notifyEnter(this, e, this.dragData);
  89. this.proxy.setStatus(status);
  90. } else {
  91. this.proxy.setStatus(this.dropAllowed);
  92. }
  93. if (this.afterDragEnter) {
  94. <span id='Ext-dd-DragSource-method-afterDragEnter'> /**
  95. </span> * An empty function by default, but provided so that you can perform a custom action
  96. * when the dragged item enters the drop target by providing an implementation.
  97. * @param {Ext.dd.DragDrop} target The drop target
  98. * @param {Event} e The event object
  99. * @param {String} id The id of the dragged element
  100. * @method afterDragEnter
  101. */
  102. this.afterDragEnter(target, e, id);
  103. }
  104. }
  105. },
  106. <span id='Ext-dd-DragSource-method-beforeDragEnter'> /**
  107. </span> * An empty function by default, but provided so that you can perform a custom action
  108. * before the dragged item enters the drop target and optionally cancel the onDragEnter.
  109. * @param {Ext.dd.DragDrop} target The drop target
  110. * @param {Event} e The event object
  111. * @param {String} id The id of the dragged element
  112. * @return {Boolean} isValid True if the drag event is valid, else false to cancel
  113. */
  114. beforeDragEnter: function(target, e, id) {
  115. return true;
  116. },
  117. // private
  118. onDragOver: function(e, id) {
  119. var target = this.cachedTarget || Ext.dd.DragDropManager.getDDById(id);
  120. if (this.beforeDragOver(target, e, id) !== false) {
  121. if(target.isNotifyTarget){
  122. var status = target.notifyOver(this, e, this.dragData);
  123. this.proxy.setStatus(status);
  124. }
  125. if (this.afterDragOver) {
  126. <span id='Ext-dd-DragSource-method-afterDragOver'> /**
  127. </span> * An empty function by default, but provided so that you can perform a custom action
  128. * while the dragged item is over the drop target by providing an implementation.
  129. * @param {Ext.dd.DragDrop} target The drop target
  130. * @param {Event} e The event object
  131. * @param {String} id The id of the dragged element
  132. * @method afterDragOver
  133. */
  134. this.afterDragOver(target, e, id);
  135. }
  136. }
  137. },
  138. <span id='Ext-dd-DragSource-method-beforeDragOver'> /**
  139. </span> * An empty function by default, but provided so that you can perform a custom action
  140. * while the dragged item is over the drop target and optionally cancel the onDragOver.
  141. * @param {Ext.dd.DragDrop} target The drop target
  142. * @param {Event} e The event object
  143. * @param {String} id The id of the dragged element
  144. * @return {Boolean} isValid True if the drag event is valid, else false to cancel
  145. */
  146. beforeDragOver: function(target, e, id) {
  147. return true;
  148. },
  149. // private
  150. onDragOut: function(e, id) {
  151. var target = this.cachedTarget || Ext.dd.DragDropManager.getDDById(id);
  152. if (this.beforeDragOut(target, e, id) !== false) {
  153. if (target.isNotifyTarget) {
  154. target.notifyOut(this, e, this.dragData);
  155. }
  156. this.proxy.reset();
  157. if (this.afterDragOut) {
  158. <span id='Ext-dd-DragSource-method-afterDragOut'> /**
  159. </span> * An empty function by default, but provided so that you can perform a custom action
  160. * after the dragged item is dragged out of the target without dropping.
  161. * @param {Ext.dd.DragDrop} target The drop target
  162. * @param {Event} e The event object
  163. * @param {String} id The id of the dragged element
  164. * @method afterDragOut
  165. */
  166. this.afterDragOut(target, e, id);
  167. }
  168. }
  169. this.cachedTarget = null;
  170. },
  171. <span id='Ext-dd-DragSource-method-beforeDragOut'> /**
  172. </span> * An empty function by default, but provided so that you can perform a custom action before the dragged
  173. * item is dragged out of the target without dropping, and optionally cancel the onDragOut.
  174. * @param {Ext.dd.DragDrop} target The drop target
  175. * @param {Event} e The event object
  176. * @param {String} id The id of the dragged element
  177. * @return {Boolean} isValid True if the drag event is valid, else false to cancel
  178. */
  179. beforeDragOut: function(target, e, id){
  180. return true;
  181. },
  182. // private
  183. onDragDrop: function(e, id){
  184. var target = this.cachedTarget || Ext.dd.DragDropManager.getDDById(id);
  185. if (this.beforeDragDrop(target, e, id) !== false) {
  186. if (target.isNotifyTarget) {
  187. if (target.notifyDrop(this, e, this.dragData) !== false) { // valid drop?
  188. this.onValidDrop(target, e, id);
  189. } else {
  190. this.onInvalidDrop(target, e, id);
  191. }
  192. } else {
  193. this.onValidDrop(target, e, id);
  194. }
  195. if (this.afterDragDrop) {
  196. <span id='Ext-dd-DragSource-method-afterDragDrop'> /**
  197. </span> * An empty function by default, but provided so that you can perform a custom action
  198. * after a valid drag drop has occurred by providing an implementation.
  199. * @param {Ext.dd.DragDrop} target The drop target
  200. * @param {Event} e The event object
  201. * @param {String} id The id of the dropped element
  202. * @method afterDragDrop
  203. */
  204. this.afterDragDrop(target, e, id);
  205. }
  206. }
  207. delete this.cachedTarget;
  208. },
  209. <span id='Ext-dd-DragSource-method-beforeDragDrop'> /**
  210. </span> * An empty function by default, but provided so that you can perform a custom action before the dragged
  211. * item is dropped onto the target and optionally cancel the onDragDrop.
  212. * @param {Ext.dd.DragDrop} target The drop target
  213. * @param {Event} e The event object
  214. * @param {String} id The id of the dragged element
  215. * @return {Boolean} isValid True if the drag drop event is valid, else false to cancel
  216. */
  217. beforeDragDrop: function(target, e, id){
  218. return true;
  219. },
  220. // private
  221. onValidDrop: function(target, e, id){
  222. this.hideProxy();
  223. if(this.afterValidDrop){
  224. <span id='Ext-dd-DragSource-method-afterValidDrop'> /**
  225. </span> * An empty function by default, but provided so that you can perform a custom action
  226. * after a valid drop has occurred by providing an implementation.
  227. * @param {Object} target The target DD
  228. * @param {Event} e The event object
  229. * @param {String} id The id of the dropped element
  230. * @method afterValidDrop
  231. */
  232. this.afterValidDrop(target, e, id);
  233. }
  234. },
  235. // private
  236. getRepairXY: function(e, data){
  237. return this.el.getXY();
  238. },
  239. // private
  240. onInvalidDrop: function(target, e, id) {
  241. this.beforeInvalidDrop(target, e, id);
  242. if (this.cachedTarget) {
  243. if(this.cachedTarget.isNotifyTarget){
  244. this.cachedTarget.notifyOut(this, e, this.dragData);
  245. }
  246. this.cacheTarget = null;
  247. }
  248. this.proxy.repair(this.getRepairXY(e, this.dragData), this.afterRepair, this);
  249. if (this.afterInvalidDrop) {
  250. <span id='Ext-dd-DragSource-method-afterInvalidDrop'> /**
  251. </span> * An empty function by default, but provided so that you can perform a custom action
  252. * after an invalid drop has occurred by providing an implementation.
  253. * @param {Event} e The event object
  254. * @param {String} id The id of the dropped element
  255. * @method afterInvalidDrop
  256. */
  257. this.afterInvalidDrop(e, id);
  258. }
  259. },
  260. // private
  261. afterRepair: function() {
  262. var me = this;
  263. if (Ext.enableFx) {
  264. me.el.highlight(me.repairHighlightColor);
  265. }
  266. me.dragging = false;
  267. },
  268. <span id='Ext-dd-DragSource-method-beforeInvalidDrop'> /**
  269. </span> * An empty function by default, but provided so that you can perform a custom action after an invalid
  270. * drop has occurred.
  271. * @param {Ext.dd.DragDrop} target The drop target
  272. * @param {Event} e The event object
  273. * @param {String} id The id of the dragged element
  274. * @return {Boolean} isValid True if the invalid drop should proceed, else false to cancel
  275. */
  276. beforeInvalidDrop: function(target, e, id) {
  277. return true;
  278. },
  279. // private
  280. handleMouseDown: function(e) {
  281. if (this.dragging) {
  282. return;
  283. }
  284. var data = this.getDragData(e);
  285. if (data &amp;&amp; this.onBeforeDrag(data, e) !== false) {
  286. this.dragData = data;
  287. this.proxy.stop();
  288. this.callParent(arguments);
  289. }
  290. },
  291. <span id='Ext-dd-DragSource-method-onBeforeDrag'> /**
  292. </span> * An empty function by default, but provided so that you can perform a custom action before the initial
  293. * drag event begins and optionally cancel it.
  294. * @param {Object} data An object containing arbitrary data to be shared with drop targets
  295. * @param {Event} e The event object
  296. * @return {Boolean} isValid True if the drag event is valid, else false to cancel
  297. */
  298. onBeforeDrag: function(data, e){
  299. return true;
  300. },
  301. <span id='Ext-dd-DragSource-method-onStartDrag'> /**
  302. </span> * An empty function by default, but provided so that you can perform a custom action once the initial
  303. * drag event has begun. The drag cannot be canceled from this function.
  304. * @param {Number} x The x position of the click on the dragged object
  305. * @param {Number} y The y position of the click on the dragged object
  306. * @method
  307. */
  308. onStartDrag: Ext.emptyFn,
  309. alignElWithMouse: function() {
  310. this.proxy.ensureAttachedToBody(true);
  311. return this.callParent(arguments);
  312. },
  313. // private override
  314. startDrag: function(x, y) {
  315. this.proxy.reset();
  316. this.proxy.hidden = false;
  317. this.dragging = true;
  318. this.proxy.update(&quot;&quot;);
  319. this.onInitDrag(x, y);
  320. this.proxy.show();
  321. },
  322. // private
  323. onInitDrag: function(x, y) {
  324. var clone = this.el.dom.cloneNode(true);
  325. clone.id = Ext.id(); // prevent duplicate ids
  326. this.proxy.update(clone);
  327. this.onStartDrag(x, y);
  328. return true;
  329. },
  330. <span id='Ext-dd-DragSource-method-getProxy'> /**
  331. </span> * Returns the drag source's underlying {@link Ext.dd.StatusProxy}
  332. * @return {Ext.dd.StatusProxy} proxy The StatusProxy
  333. */
  334. getProxy: function() {
  335. return this.proxy;
  336. },
  337. <span id='Ext-dd-DragSource-method-hideProxy'> /**
  338. </span> * Hides the drag source's {@link Ext.dd.StatusProxy}
  339. */
  340. hideProxy: function() {
  341. this.proxy.hide();
  342. this.proxy.reset(true);
  343. this.dragging = false;
  344. },
  345. // private
  346. triggerCacheRefresh: function() {
  347. Ext.dd.DDM.refreshCache(this.groups);
  348. },
  349. // private - override to prevent hiding
  350. b4EndDrag: function(e) {
  351. },
  352. // private - override to prevent moving
  353. endDrag : function(e){
  354. this.onEndDrag(this.dragData, e);
  355. },
  356. // private
  357. onEndDrag : function(data, e){
  358. },
  359. // private - pin to cursor
  360. autoOffset : function(x, y) {
  361. this.setDelta(-12, -20);
  362. },
  363. destroy: function(){
  364. this.callParent();
  365. Ext.destroy(this.proxy);
  366. }
  367. });
  368. </pre>
  369. </body>
  370. </html>