/hippo/src/main/webapp/ext/src/dd/DragSource.js

http://hdbc.googlecode.com/ · JavaScript · 365 lines · 175 code · 35 blank · 155 comment · 28 complexity · 297958767a852774016b5f857c657619 MD5 · raw file

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