DragDrop2.html 40 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121
  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-DragDrop'>/**
  26. </span> * Defines the interface and base operation of items that that can be
  27. * dragged or can be drop targets. It was designed to be extended, overriding
  28. * the event handlers for startDrag, onDrag, onDragOver and onDragOut.
  29. * Up to three html elements can be associated with a DragDrop instance:
  30. *
  31. * - linked element: the element that is passed into the constructor.
  32. * This is the element which defines the boundaries for interaction with
  33. * other DragDrop objects.
  34. *
  35. * - handle element(s): The drag operation only occurs if the element that
  36. * was clicked matches a handle element. By default this is the linked
  37. * element, but there are times that you will want only a portion of the
  38. * linked element to initiate the drag operation, and the setHandleElId()
  39. * method provides a way to define this.
  40. *
  41. * - drag element: this represents the element that would be moved along
  42. * with the cursor during a drag operation. By default, this is the linked
  43. * element itself as in {@link Ext.dd.DD}. setDragElId() lets you define
  44. * a separate element that would be moved, as in {@link Ext.dd.DDProxy}.
  45. *
  46. * This class should not be instantiated until the onload event to ensure that
  47. * the associated elements are available.
  48. * The following would define a DragDrop obj that would interact with any
  49. * other DragDrop obj in the &quot;group1&quot; group:
  50. *
  51. * dd = new Ext.dd.DragDrop(&quot;div1&quot;, &quot;group1&quot;);
  52. *
  53. * Since none of the event handlers have been implemented, nothing would
  54. * actually happen if you were to run the code above. Normally you would
  55. * override this class or one of the default implementations, but you can
  56. * also override the methods you want on an instance of the class...
  57. *
  58. * dd.onDragDrop = function(e, id) {
  59. * alert(&quot;dd was dropped on &quot; + id);
  60. * }
  61. *
  62. */
  63. Ext.define('Ext.dd.DragDrop', {
  64. requires: ['Ext.dd.DragDropManager'],
  65. <span id='Ext-dd-DragDrop-method-constructor'> /**
  66. </span> * Creates new DragDrop.
  67. * @param {String} id of the element that is linked to this instance
  68. * @param {String} sGroup the group of related DragDrop objects
  69. * @param {Object} config an object containing configurable attributes.
  70. * Valid properties for DragDrop:
  71. *
  72. * - padding
  73. * - isTarget
  74. * - maintainOffset
  75. * - primaryButtonOnly
  76. */
  77. constructor: function(id, sGroup, config) {
  78. if(id) {
  79. this.init(id, sGroup, config);
  80. }
  81. },
  82. <span id='Ext-dd-DragDrop-property-ignoreSelf'> /**
  83. </span> * @property {Boolean} ignoreSelf
  84. * Set to false to enable a DragDrop object to fire drag events while dragging
  85. * over its own Element. Defaults to true - DragDrop objects do not by default
  86. * fire drag events to themselves.
  87. */
  88. <span id='Ext-dd-DragDrop-property-id'> /**
  89. </span> * @property {String} id
  90. * The id of the element associated with this object. This is what we
  91. * refer to as the &quot;linked element&quot; because the size and position of
  92. * this element is used to determine when the drag and drop objects have
  93. * interacted.
  94. */
  95. id: null,
  96. <span id='Ext-dd-DragDrop-property-config'> /**
  97. </span> * @property {Object} config
  98. * Configuration attributes passed into the constructor
  99. */
  100. config: null,
  101. <span id='Ext-dd-DragDrop-property-dragElId'> /**
  102. </span> * @property {String} dragElId
  103. * The id of the element that will be dragged. By default this is same
  104. * as the linked element, but could be changed to another element. Ex:
  105. * Ext.dd.DDProxy
  106. * @private
  107. */
  108. dragElId: null,
  109. <span id='Ext-dd-DragDrop-property-handleElId'> /**
  110. </span> * @property {String} handleElId
  111. * The ID of the element that initiates the drag operation. By default
  112. * this is the linked element, but could be changed to be a child of this
  113. * element. This lets us do things like only starting the drag when the
  114. * header element within the linked html element is clicked.
  115. * @private
  116. */
  117. handleElId: null,
  118. <span id='Ext-dd-DragDrop-property-invalidHandleTypes'> /**
  119. </span> * @property {Object} invalidHandleTypes
  120. * An object who's property names identify HTML tags to be considered invalid as drag handles.
  121. * A non-null property value identifies the tag as invalid. Defaults to the
  122. * following value which prevents drag operations from being initiated by `&lt;a&gt;` elements:
  123. *
  124. * {
  125. * A: &quot;A&quot;
  126. * }
  127. */
  128. invalidHandleTypes: null,
  129. <span id='Ext-dd-DragDrop-property-invalidHandleIds'> /**
  130. </span> * @property {Object} invalidHandleIds
  131. * An object who's property names identify the IDs of elements to be considered invalid as drag handles.
  132. * A non-null property value identifies the ID as invalid. For example, to prevent
  133. * dragging from being initiated on element ID &quot;foo&quot;, use:
  134. *
  135. * {
  136. * foo: true
  137. * }
  138. */
  139. invalidHandleIds: null,
  140. <span id='Ext-dd-DragDrop-property-invalidHandleClasses'> /**
  141. </span> * @property {String[]} invalidHandleClasses
  142. * An Array of CSS class names for elements to be considered in valid as drag handles.
  143. */
  144. invalidHandleClasses: null,
  145. <span id='Ext-dd-DragDrop-property-startPageX'> /**
  146. </span> * @property {Number} startPageX
  147. * The linked element's absolute X position at the time the drag was
  148. * started
  149. * @private
  150. */
  151. startPageX: 0,
  152. <span id='Ext-dd-DragDrop-property-startPageY'> /**
  153. </span> * @property {Number} startPageY
  154. * The linked element's absolute X position at the time the drag was
  155. * started
  156. * @private
  157. */
  158. startPageY: 0,
  159. <span id='Ext-dd-DragDrop-property-groups'> /**
  160. </span> * @property {Object} groups
  161. * The group defines a logical collection of DragDrop objects that are
  162. * related. Instances only get events when interacting with other
  163. * DragDrop object in the same group. This lets us define multiple
  164. * groups using a single DragDrop subclass if we want.
  165. *
  166. * An object in the format {'group1':true, 'group2':true}
  167. */
  168. groups: null,
  169. <span id='Ext-dd-DragDrop-property-locked'> /**
  170. </span> * @property {Boolean} locked
  171. * Individual drag/drop instances can be locked. This will prevent
  172. * onmousedown start drag.
  173. * @private
  174. */
  175. locked: false,
  176. <span id='Ext-dd-DragDrop-method-lock'> /**
  177. </span> * Locks this instance
  178. */
  179. lock: function() {
  180. this.locked = true;
  181. },
  182. <span id='Ext-dd-DragDrop-property-moveOnly'> /**
  183. </span> * @property {Boolean} moveOnly
  184. * When set to true, other DD objects in cooperating DDGroups do not receive
  185. * notification events when this DD object is dragged over them.
  186. */
  187. moveOnly: false,
  188. <span id='Ext-dd-DragDrop-method-unlock'> /**
  189. </span> * Unlocks this instace
  190. */
  191. unlock: function() {
  192. this.locked = false;
  193. },
  194. <span id='Ext-dd-DragDrop-property-isTarget'> /**
  195. </span> * @property {Boolean} isTarget
  196. * By default, all instances can be a drop target. This can be disabled by
  197. * setting isTarget to false.
  198. */
  199. isTarget: true,
  200. <span id='Ext-dd-DragDrop-property-padding'> /**
  201. </span> * @property {Number[]} padding
  202. * The padding configured for this drag and drop object for calculating
  203. * the drop zone intersection with this object.
  204. * An array containing the 4 padding values: [top, right, bottom, left]
  205. */
  206. padding: null,
  207. <span id='Ext-dd-DragDrop-property-_domRef'> /**
  208. </span> * @property _domRef
  209. * Cached reference to the linked element
  210. * @private
  211. */
  212. _domRef: null,
  213. <span id='Ext-dd-DragDrop-property-__ygDragDrop'> /**
  214. </span> * @property __ygDragDrop
  215. * Internal typeof flag
  216. * @private
  217. */
  218. __ygDragDrop: true,
  219. <span id='Ext-dd-DragDrop-property-constrainX'> /**
  220. </span> * @property {Boolean} constrainX
  221. * Set to true when horizontal contraints are applied
  222. * @private
  223. */
  224. constrainX: false,
  225. <span id='Ext-dd-DragDrop-property-constrainY'> /**
  226. </span> * @property {Boolean} constrainY
  227. * Set to true when vertical contraints are applied
  228. * @private
  229. */
  230. constrainY: false,
  231. <span id='Ext-dd-DragDrop-property-minX'> /**
  232. </span> * @property {Number} minX
  233. * The left constraint
  234. * @private
  235. */
  236. minX: 0,
  237. <span id='Ext-dd-DragDrop-property-maxX'> /**
  238. </span> * @property {Number} maxX
  239. * The right constraint
  240. * @private
  241. */
  242. maxX: 0,
  243. <span id='Ext-dd-DragDrop-property-minY'> /**
  244. </span> * @property {Number} minY
  245. * The up constraint
  246. * @private
  247. */
  248. minY: 0,
  249. <span id='Ext-dd-DragDrop-property-maxY'> /**
  250. </span> * @property {Number} maxY
  251. * The down constraint
  252. * @private
  253. */
  254. maxY: 0,
  255. <span id='Ext-dd-DragDrop-property-maintainOffset'> /**
  256. </span> * @property {Boolean} maintainOffset
  257. * Maintain offsets when we resetconstraints. Set to true when you want
  258. * the position of the element relative to its parent to stay the same
  259. * when the page changes
  260. */
  261. maintainOffset: false,
  262. <span id='Ext-dd-DragDrop-property-xTicks'> /**
  263. </span> * @property {Number[]} xTicks
  264. * Array of pixel locations the element will snap to if we specified a
  265. * horizontal graduation/interval. This array is generated automatically
  266. * when you define a tick interval.
  267. */
  268. xTicks: null,
  269. <span id='Ext-dd-DragDrop-property-yTicks'> /**
  270. </span> * @property {Number[]} yTicks
  271. * Array of pixel locations the element will snap to if we specified a
  272. * vertical graduation/interval. This array is generated automatically
  273. * when you define a tick interval.
  274. */
  275. yTicks: null,
  276. <span id='Ext-dd-DragDrop-property-primaryButtonOnly'> /**
  277. </span> * @property {Boolean} primaryButtonOnly
  278. * By default the drag and drop instance will only respond to the primary
  279. * button click (left button for a right-handed mouse). Set to true to
  280. * allow drag and drop to start with any mouse click that is propogated
  281. * by the browser
  282. */
  283. primaryButtonOnly: true,
  284. <span id='Ext-dd-DragDrop-property-available'> /**
  285. </span> * @property {Boolean} available
  286. * The available property is false until the linked dom element is accessible.
  287. */
  288. available: false,
  289. <span id='Ext-dd-DragDrop-property-hasOuterHandles'> /**
  290. </span> * @property {Boolean} hasOuterHandles
  291. * By default, drags can only be initiated if the mousedown occurs in the
  292. * region the linked element is. This is done in part to work around a
  293. * bug in some browsers that mis-report the mousedown if the previous
  294. * mouseup happened outside of the window. This property is set to true
  295. * if outer handles are defined. Defaults to false.
  296. */
  297. hasOuterHandles: false,
  298. <span id='Ext-dd-DragDrop-method-b4StartDrag'> /**
  299. </span> * Code that executes immediately before the startDrag event
  300. * @private
  301. */
  302. b4StartDrag: function(x, y) { },
  303. <span id='Ext-dd-DragDrop-method-startDrag'> /**
  304. </span> * Abstract method called after a drag/drop object is clicked
  305. * and the drag or mousedown time thresholds have beeen met.
  306. * @param {Number} X click location
  307. * @param {Number} Y click location
  308. */
  309. startDrag: function(x, y) { /* override this */ },
  310. <span id='Ext-dd-DragDrop-method-b4Drag'> /**
  311. </span> * Code that executes immediately before the onDrag event
  312. * @private
  313. */
  314. b4Drag: function(e) { },
  315. <span id='Ext-dd-DragDrop-method-onDrag'> /**
  316. </span> * Abstract method called during the onMouseMove event while dragging an
  317. * object.
  318. * @param {Event} e the mousemove event
  319. */
  320. onDrag: function(e) { /* override this */ },
  321. <span id='Ext-dd-DragDrop-method-onDragEnter'> /**
  322. </span> * Abstract method called when this element fist begins hovering over
  323. * another DragDrop obj
  324. * @param {Event} e the mousemove event
  325. * @param {String/Ext.dd.DragDrop[]} id In POINT mode, the element
  326. * id this is hovering over. In INTERSECT mode, an array of one or more
  327. * dragdrop items being hovered over.
  328. */
  329. onDragEnter: function(e, id) { /* override this */ },
  330. <span id='Ext-dd-DragDrop-method-b4DragOver'> /**
  331. </span> * Code that executes immediately before the onDragOver event
  332. * @private
  333. */
  334. b4DragOver: function(e) { },
  335. <span id='Ext-dd-DragDrop-method-onDragOver'> /**
  336. </span> * Abstract method called when this element is hovering over another
  337. * DragDrop obj
  338. * @param {Event} e the mousemove event
  339. * @param {String/Ext.dd.DragDrop[]} id In POINT mode, the element
  340. * id this is hovering over. In INTERSECT mode, an array of dd items
  341. * being hovered over.
  342. */
  343. onDragOver: function(e, id) { /* override this */ },
  344. <span id='Ext-dd-DragDrop-method-b4DragOut'> /**
  345. </span> * Code that executes immediately before the onDragOut event
  346. * @private
  347. */
  348. b4DragOut: function(e) { },
  349. <span id='Ext-dd-DragDrop-method-onDragOut'> /**
  350. </span> * Abstract method called when we are no longer hovering over an element
  351. * @param {Event} e the mousemove event
  352. * @param {String/Ext.dd.DragDrop[]} id In POINT mode, the element
  353. * id this was hovering over. In INTERSECT mode, an array of dd items
  354. * that the mouse is no longer over.
  355. */
  356. onDragOut: function(e, id) { /* override this */ },
  357. <span id='Ext-dd-DragDrop-method-b4DragDrop'> /**
  358. </span> * Code that executes immediately before the onDragDrop event
  359. * @private
  360. */
  361. b4DragDrop: function(e) { },
  362. <span id='Ext-dd-DragDrop-method-onDragDrop'> /**
  363. </span> * Abstract method called when this item is dropped on another DragDrop
  364. * obj
  365. * @param {Event} e the mouseup event
  366. * @param {String/Ext.dd.DragDrop[]} id In POINT mode, the element
  367. * id this was dropped on. In INTERSECT mode, an array of dd items this
  368. * was dropped on.
  369. */
  370. onDragDrop: function(e, id) { /* override this */ },
  371. <span id='Ext-dd-DragDrop-method-onInvalidDrop'> /**
  372. </span> * Abstract method called when this item is dropped on an area with no
  373. * drop target
  374. * @param {Event} e the mouseup event
  375. */
  376. onInvalidDrop: function(e) { /* override this */ },
  377. <span id='Ext-dd-DragDrop-method-b4EndDrag'> /**
  378. </span> * Code that executes immediately before the endDrag event
  379. * @private
  380. */
  381. b4EndDrag: function(e) { },
  382. <span id='Ext-dd-DragDrop-method-endDrag'> /**
  383. </span> * Called when we are done dragging the object
  384. * @param {Event} e the mouseup event
  385. */
  386. endDrag: function(e) { /* override this */ },
  387. <span id='Ext-dd-DragDrop-method-b4MouseDown'> /**
  388. </span> * Code executed immediately before the onMouseDown event
  389. * @param {Event} e the mousedown event
  390. * @private
  391. */
  392. b4MouseDown: function(e) { },
  393. <span id='Ext-dd-DragDrop-method-onMouseDown'> /**
  394. </span> * Called when a drag/drop obj gets a mousedown
  395. * @param {Event} e the mousedown event
  396. */
  397. onMouseDown: function(e) { /* override this */ },
  398. <span id='Ext-dd-DragDrop-method-onMouseUp'> /**
  399. </span> * Called when a drag/drop obj gets a mouseup
  400. * @param {Event} e the mouseup event
  401. */
  402. onMouseUp: function(e) { /* override this */ },
  403. <span id='Ext-dd-DragDrop-method-onAvailable'> /**
  404. </span> * Override the onAvailable method to do what is needed after the initial
  405. * position was determined.
  406. */
  407. onAvailable: function () {
  408. },
  409. <span id='Ext-dd-DragDrop-property-defaultPadding'> /**
  410. </span> * @property {Object} defaultPadding
  411. * Provides default constraint padding to &quot;constrainTo&quot; elements.
  412. */
  413. defaultPadding: {
  414. left: 0,
  415. right: 0,
  416. top: 0,
  417. bottom: 0
  418. },
  419. <span id='Ext-dd-DragDrop-method-constrainTo'> /**
  420. </span> * Initializes the drag drop object's constraints to restrict movement to a certain element.
  421. *
  422. * Usage:
  423. *
  424. * var dd = new Ext.dd.DDProxy(&quot;dragDiv1&quot;, &quot;proxytest&quot;,
  425. * { dragElId: &quot;existingProxyDiv&quot; });
  426. * dd.startDrag = function(){
  427. * this.constrainTo(&quot;parent-id&quot;);
  428. * };
  429. *
  430. * Or you can initalize it using the {@link Ext.Element} object:
  431. *
  432. * Ext.get(&quot;dragDiv1&quot;).initDDProxy(&quot;proxytest&quot;, {dragElId: &quot;existingProxyDiv&quot;}, {
  433. * startDrag : function(){
  434. * this.constrainTo(&quot;parent-id&quot;);
  435. * }
  436. * });
  437. *
  438. * @param {String/HTMLElement/Ext.Element} constrainTo The element or element ID to constrain to.
  439. * @param {Object/Number} pad (optional) Pad provides a way to specify &quot;padding&quot; of the constraints,
  440. * and can be either a number for symmetrical padding (4 would be equal to `{left:4, right:4, top:4, bottom:4}`) or
  441. * an object containing the sides to pad. For example: `{right:10, bottom:10}`
  442. * @param {Boolean} inContent (optional) Constrain the draggable in the content box of the element (inside padding and borders)
  443. */
  444. constrainTo : function(constrainTo, pad, inContent){
  445. if(Ext.isNumber(pad)){
  446. pad = {left: pad, right:pad, top:pad, bottom:pad};
  447. }
  448. pad = pad || this.defaultPadding;
  449. var b = Ext.get(this.getEl()).getBox(),
  450. ce = Ext.get(constrainTo),
  451. s = ce.getScroll(),
  452. c,
  453. cd = ce.dom,
  454. xy,
  455. topSpace,
  456. leftSpace;
  457. if(cd == document.body){
  458. c = { x: s.left, y: s.top, width: Ext.Element.getViewWidth(), height: Ext.Element.getViewHeight()};
  459. }else{
  460. xy = ce.getXY();
  461. c = {x : xy[0], y: xy[1], width: cd.clientWidth, height: cd.clientHeight};
  462. }
  463. topSpace = b.y - c.y;
  464. leftSpace = b.x - c.x;
  465. this.resetConstraints();
  466. this.setXConstraint(leftSpace - (pad.left||0), // left
  467. c.width - leftSpace - b.width - (pad.right||0), //right
  468. this.xTickSize
  469. );
  470. this.setYConstraint(topSpace - (pad.top||0), //top
  471. c.height - topSpace - b.height - (pad.bottom||0), //bottom
  472. this.yTickSize
  473. );
  474. },
  475. <span id='Ext-dd-DragDrop-method-getEl'> /**
  476. </span> * Returns a reference to the linked element
  477. * @return {HTMLElement} the html element
  478. */
  479. getEl: function() {
  480. if (!this._domRef) {
  481. this._domRef = Ext.getDom(this.id);
  482. }
  483. return this._domRef;
  484. },
  485. <span id='Ext-dd-DragDrop-method-getDragEl'> /**
  486. </span> * Returns a reference to the actual element to drag. By default this is
  487. * the same as the html element, but it can be assigned to another
  488. * element. An example of this can be found in Ext.dd.DDProxy
  489. * @return {HTMLElement} the html element
  490. */
  491. getDragEl: function() {
  492. return Ext.getDom(this.dragElId);
  493. },
  494. <span id='Ext-dd-DragDrop-method-init'> /**
  495. </span> * Sets up the DragDrop object. Must be called in the constructor of any
  496. * Ext.dd.DragDrop subclass
  497. * @param {String} id the id of the linked element
  498. * @param {String} sGroup the group of related items
  499. * @param {Object} config configuration attributes
  500. */
  501. init: function(id, sGroup, config) {
  502. this.initTarget(id, sGroup, config);
  503. Ext.EventManager.on(this.id, &quot;mousedown&quot;, this.handleMouseDown, this);
  504. // Ext.EventManager.on(this.id, &quot;selectstart&quot;, Event.preventDefault);
  505. },
  506. <span id='Ext-dd-DragDrop-method-initTarget'> /**
  507. </span> * Initializes Targeting functionality only... the object does not
  508. * get a mousedown handler.
  509. * @param {String} id the id of the linked element
  510. * @param {String} sGroup the group of related items
  511. * @param {Object} config configuration attributes
  512. */
  513. initTarget: function(id, sGroup, config) {
  514. // configuration attributes
  515. this.config = config || {};
  516. // create a local reference to the drag and drop manager
  517. this.DDMInstance = Ext.dd.DragDropManager;
  518. // initialize the groups array
  519. this.groups = {};
  520. // assume that we have an element reference instead of an id if the
  521. // parameter is not a string
  522. if (typeof id !== &quot;string&quot;) {
  523. id = Ext.id(id);
  524. }
  525. // set the id
  526. this.id = id;
  527. // add to an interaction group
  528. this.addToGroup((sGroup) ? sGroup : &quot;default&quot;);
  529. // We don't want to register this as the handle with the manager
  530. // so we just set the id rather than calling the setter.
  531. this.handleElId = id;
  532. // the linked element is the element that gets dragged by default
  533. this.setDragElId(id);
  534. // by default, clicked anchors will not start drag operations.
  535. this.invalidHandleTypes = { A: &quot;A&quot; };
  536. this.invalidHandleIds = {};
  537. this.invalidHandleClasses = [];
  538. this.applyConfig();
  539. this.handleOnAvailable();
  540. },
  541. <span id='Ext-dd-DragDrop-method-applyConfig'> /**
  542. </span> * Applies the configuration parameters that were passed into the constructor.
  543. * This is supposed to happen at each level through the inheritance chain. So
  544. * a DDProxy implentation will execute apply config on DDProxy, DD, and
  545. * DragDrop in order to get all of the parameters that are available in
  546. * each object.
  547. */
  548. applyConfig: function() {
  549. // configurable properties:
  550. // padding, isTarget, maintainOffset, primaryButtonOnly
  551. this.padding = this.config.padding || [0, 0, 0, 0];
  552. this.isTarget = (this.config.isTarget !== false);
  553. this.maintainOffset = (this.config.maintainOffset);
  554. this.primaryButtonOnly = (this.config.primaryButtonOnly !== false);
  555. },
  556. <span id='Ext-dd-DragDrop-method-handleOnAvailable'> /**
  557. </span> * Executed when the linked element is available
  558. * @private
  559. */
  560. handleOnAvailable: function() {
  561. this.available = true;
  562. this.resetConstraints();
  563. this.onAvailable();
  564. },
  565. <span id='Ext-dd-DragDrop-method-setPadding'> /**
  566. </span> * Configures the padding for the target zone in px. Effectively expands
  567. * (or reduces) the virtual object size for targeting calculations.
  568. * Supports css-style shorthand; if only one parameter is passed, all sides
  569. * will have that padding, and if only two are passed, the top and bottom
  570. * will have the first param, the left and right the second.
  571. * @param {Number} iTop Top pad
  572. * @param {Number} iRight Right pad
  573. * @param {Number} iBot Bot pad
  574. * @param {Number} iLeft Left pad
  575. */
  576. setPadding: function(iTop, iRight, iBot, iLeft) {
  577. // this.padding = [iLeft, iRight, iTop, iBot];
  578. if (!iRight &amp;&amp; 0 !== iRight) {
  579. this.padding = [iTop, iTop, iTop, iTop];
  580. } else if (!iBot &amp;&amp; 0 !== iBot) {
  581. this.padding = [iTop, iRight, iTop, iRight];
  582. } else {
  583. this.padding = [iTop, iRight, iBot, iLeft];
  584. }
  585. },
  586. <span id='Ext-dd-DragDrop-method-setInitPosition'> /**
  587. </span> * Stores the initial placement of the linked element.
  588. * @param {Number} diffX the X offset, default 0
  589. * @param {Number} diffY the Y offset, default 0
  590. */
  591. setInitPosition: function(diffX, diffY) {
  592. var el = this.getEl(),
  593. dx, dy, p;
  594. if (!this.DDMInstance.verifyEl(el)) {
  595. return;
  596. }
  597. dx = diffX || 0;
  598. dy = diffY || 0;
  599. p = Ext.Element.getXY( el );
  600. this.initPageX = p[0] - dx;
  601. this.initPageY = p[1] - dy;
  602. this.lastPageX = p[0];
  603. this.lastPageY = p[1];
  604. this.setStartPosition(p);
  605. },
  606. <span id='Ext-dd-DragDrop-method-setStartPosition'> /**
  607. </span> * Sets the start position of the element. This is set when the obj
  608. * is initialized, the reset when a drag is started.
  609. * @param pos current position (from previous lookup)
  610. * @private
  611. */
  612. setStartPosition: function(pos) {
  613. var p = pos || Ext.Element.getXY( this.getEl() );
  614. this.deltaSetXY = null;
  615. this.startPageX = p[0];
  616. this.startPageY = p[1];
  617. },
  618. <span id='Ext-dd-DragDrop-method-addToGroup'> /**
  619. </span> * Adds this instance to a group of related drag/drop objects. All
  620. * instances belong to at least one group, and can belong to as many
  621. * groups as needed.
  622. * @param {String} sGroup the name of the group
  623. */
  624. addToGroup: function(sGroup) {
  625. this.groups[sGroup] = true;
  626. this.DDMInstance.regDragDrop(this, sGroup);
  627. },
  628. <span id='Ext-dd-DragDrop-method-removeFromGroup'> /**
  629. </span> * Removes this instance from the supplied interaction group
  630. * @param {String} sGroup The group to drop
  631. */
  632. removeFromGroup: function(sGroup) {
  633. if (this.groups[sGroup]) {
  634. delete this.groups[sGroup];
  635. }
  636. this.DDMInstance.removeDDFromGroup(this, sGroup);
  637. },
  638. <span id='Ext-dd-DragDrop-method-setDragElId'> /**
  639. </span> * Allows you to specify that an element other than the linked element
  640. * will be moved with the cursor during a drag
  641. * @param {String} id the id of the element that will be used to initiate the drag
  642. */
  643. setDragElId: function(id) {
  644. this.dragElId = id;
  645. },
  646. <span id='Ext-dd-DragDrop-method-setHandleElId'> /**
  647. </span> * Allows you to specify a child of the linked element that should be
  648. * used to initiate the drag operation. An example of this would be if
  649. * you have a content div with text and links. Clicking anywhere in the
  650. * content area would normally start the drag operation. Use this method
  651. * to specify that an element inside of the content div is the element
  652. * that starts the drag operation.
  653. * @param {String} id the id of the element that will be used to
  654. * initiate the drag.
  655. */
  656. setHandleElId: function(id) {
  657. if (typeof id !== &quot;string&quot;) {
  658. id = Ext.id(id);
  659. }
  660. this.handleElId = id;
  661. this.DDMInstance.regHandle(this.id, id);
  662. },
  663. <span id='Ext-dd-DragDrop-method-setOuterHandleElId'> /**
  664. </span> * Allows you to set an element outside of the linked element as a drag
  665. * handle
  666. * @param {String} id the id of the element that will be used to initiate the drag
  667. */
  668. setOuterHandleElId: function(id) {
  669. if (typeof id !== &quot;string&quot;) {
  670. id = Ext.id(id);
  671. }
  672. Ext.EventManager.on(id, &quot;mousedown&quot;, this.handleMouseDown, this);
  673. this.setHandleElId(id);
  674. this.hasOuterHandles = true;
  675. },
  676. <span id='Ext-dd-DragDrop-method-unreg'> /**
  677. </span> * Removes all drag and drop hooks for this element
  678. */
  679. unreg: function() {
  680. Ext.EventManager.un(this.id, &quot;mousedown&quot;, this.handleMouseDown, this);
  681. this._domRef = null;
  682. this.DDMInstance._remove(this);
  683. },
  684. destroy : function(){
  685. this.unreg();
  686. },
  687. <span id='Ext-dd-DragDrop-method-isLocked'> /**
  688. </span> * Returns true if this instance is locked, or the drag drop mgr is locked
  689. * (meaning that all drag/drop is disabled on the page.)
  690. * @return {Boolean} true if this obj or all drag/drop is locked, else
  691. * false
  692. */
  693. isLocked: function() {
  694. return (this.DDMInstance.isLocked() || this.locked);
  695. },
  696. <span id='Ext-dd-DragDrop-method-handleMouseDown'> /**
  697. </span> * Called when this object is clicked
  698. * @param {Event} e
  699. * @param {Ext.dd.DragDrop} oDD the clicked dd object (this dd obj)
  700. * @private
  701. */
  702. handleMouseDown: function(e, oDD){
  703. if (this.primaryButtonOnly &amp;&amp; e.button != 0) {
  704. return;
  705. }
  706. if (this.isLocked()) {
  707. return;
  708. }
  709. this.DDMInstance.refreshCache(this.groups);
  710. if (this.hasOuterHandles || this.DDMInstance.isOverTarget(e.getPoint(), this) ) {
  711. if (this.clickValidator(e)) {
  712. // set the initial element position
  713. this.setStartPosition();
  714. this.b4MouseDown(e);
  715. this.onMouseDown(e);
  716. this.DDMInstance.handleMouseDown(e, this);
  717. this.DDMInstance.stopEvent(e);
  718. }
  719. }
  720. },
  721. clickValidator: function(e) {
  722. var target = e.getTarget();
  723. return ( this.isValidHandleChild(target) &amp;&amp;
  724. (this.id == this.handleElId ||
  725. this.DDMInstance.handleWasClicked(target, this.id)) );
  726. },
  727. <span id='Ext-dd-DragDrop-method-addInvalidHandleType'> /**
  728. </span> * Allows you to specify a tag name that should not start a drag operation
  729. * when clicked. This is designed to facilitate embedding links within a
  730. * drag handle that do something other than start the drag.
  731. * @method addInvalidHandleType
  732. * @param {String} tagName the type of element to exclude
  733. */
  734. addInvalidHandleType: function(tagName) {
  735. var type = tagName.toUpperCase();
  736. this.invalidHandleTypes[type] = type;
  737. },
  738. <span id='Ext-dd-DragDrop-method-addInvalidHandleId'> /**
  739. </span> * Lets you to specify an element id for a child of a drag handle
  740. * that should not initiate a drag
  741. * @method addInvalidHandleId
  742. * @param {String} id the element id of the element you wish to ignore
  743. */
  744. addInvalidHandleId: function(id) {
  745. if (typeof id !== &quot;string&quot;) {
  746. id = Ext.id(id);
  747. }
  748. this.invalidHandleIds[id] = id;
  749. },
  750. <span id='Ext-dd-DragDrop-method-addInvalidHandleClass'> /**
  751. </span> * Lets you specify a css class of elements that will not initiate a drag
  752. * @param {String} cssClass the class of the elements you wish to ignore
  753. */
  754. addInvalidHandleClass: function(cssClass) {
  755. this.invalidHandleClasses.push(cssClass);
  756. },
  757. <span id='Ext-dd-DragDrop-method-removeInvalidHandleType'> /**
  758. </span> * Unsets an excluded tag name set by addInvalidHandleType
  759. * @param {String} tagName the type of element to unexclude
  760. */
  761. removeInvalidHandleType: function(tagName) {
  762. var type = tagName.toUpperCase();
  763. // this.invalidHandleTypes[type] = null;
  764. delete this.invalidHandleTypes[type];
  765. },
  766. <span id='Ext-dd-DragDrop-method-removeInvalidHandleId'> /**
  767. </span> * Unsets an invalid handle id
  768. * @param {String} id the id of the element to re-enable
  769. */
  770. removeInvalidHandleId: function(id) {
  771. if (typeof id !== &quot;string&quot;) {
  772. id = Ext.id(id);
  773. }
  774. delete this.invalidHandleIds[id];
  775. },
  776. <span id='Ext-dd-DragDrop-method-removeInvalidHandleClass'> /**
  777. </span> * Unsets an invalid css class
  778. * @param {String} cssClass the class of the element(s) you wish to
  779. * re-enable
  780. */
  781. removeInvalidHandleClass: function(cssClass) {
  782. for (var i=0, len=this.invalidHandleClasses.length; i&lt;len; ++i) {
  783. if (this.invalidHandleClasses[i] == cssClass) {
  784. delete this.invalidHandleClasses[i];
  785. }
  786. }
  787. },
  788. <span id='Ext-dd-DragDrop-method-isValidHandleChild'> /**
  789. </span> * Checks the tag exclusion list to see if this click should be ignored
  790. * @param {HTMLElement} node the HTMLElement to evaluate
  791. * @return {Boolean} true if this is a valid tag type, false if not
  792. */
  793. isValidHandleChild: function(node) {
  794. var valid = true,
  795. nodeName,
  796. i, len;
  797. // var n = (node.nodeName == &quot;#text&quot;) ? node.parentNode : node;
  798. try {
  799. nodeName = node.nodeName.toUpperCase();
  800. } catch(e) {
  801. nodeName = node.nodeName;
  802. }
  803. valid = valid &amp;&amp; !this.invalidHandleTypes[nodeName];
  804. valid = valid &amp;&amp; !this.invalidHandleIds[node.id];
  805. for (i=0, len=this.invalidHandleClasses.length; valid &amp;&amp; i&lt;len; ++i) {
  806. valid = !Ext.fly(node).hasCls(this.invalidHandleClasses[i]);
  807. }
  808. return valid;
  809. },
  810. <span id='Ext-dd-DragDrop-method-setXTicks'> /**
  811. </span> * Creates the array of horizontal tick marks if an interval was specified
  812. * in setXConstraint().
  813. * @private
  814. */
  815. setXTicks: function(iStartX, iTickSize) {
  816. this.xTicks = [];
  817. this.xTickSize = iTickSize;
  818. var tickMap = {},
  819. i;
  820. for (i = this.initPageX; i &gt;= this.minX; i = i - iTickSize) {
  821. if (!tickMap[i]) {
  822. this.xTicks[this.xTicks.length] = i;
  823. tickMap[i] = true;
  824. }
  825. }
  826. for (i = this.initPageX; i &lt;= this.maxX; i = i + iTickSize) {
  827. if (!tickMap[i]) {
  828. this.xTicks[this.xTicks.length] = i;
  829. tickMap[i] = true;
  830. }
  831. }
  832. Ext.Array.sort(this.xTicks, this.DDMInstance.numericSort);
  833. },
  834. <span id='Ext-dd-DragDrop-method-setYTicks'> /**
  835. </span> * Creates the array of vertical tick marks if an interval was specified in
  836. * setYConstraint().
  837. * @private
  838. */
  839. setYTicks: function(iStartY, iTickSize) {
  840. this.yTicks = [];
  841. this.yTickSize = iTickSize;
  842. var tickMap = {},
  843. i;
  844. for (i = this.initPageY; i &gt;= this.minY; i = i - iTickSize) {
  845. if (!tickMap[i]) {
  846. this.yTicks[this.yTicks.length] = i;
  847. tickMap[i] = true;
  848. }
  849. }
  850. for (i = this.initPageY; i &lt;= this.maxY; i = i + iTickSize) {
  851. if (!tickMap[i]) {
  852. this.yTicks[this.yTicks.length] = i;
  853. tickMap[i] = true;
  854. }
  855. }
  856. Ext.Array.sort(this.yTicks, this.DDMInstance.numericSort);
  857. },
  858. <span id='Ext-dd-DragDrop-method-setXConstraint'> /**
  859. </span> * By default, the element can be dragged any place on the screen. Use
  860. * this method to limit the horizontal travel of the element. Pass in
  861. * 0,0 for the parameters if you want to lock the drag to the y axis.
  862. * @param {Number} iLeft the number of pixels the element can move to the left
  863. * @param {Number} iRight the number of pixels the element can move to the
  864. * right
  865. * @param {Number} iTickSize (optional) parameter for specifying that the
  866. * element should move iTickSize pixels at a time.
  867. */
  868. setXConstraint: function(iLeft, iRight, iTickSize) {
  869. this.leftConstraint = iLeft;
  870. this.rightConstraint = iRight;
  871. this.minX = this.initPageX - iLeft;
  872. this.maxX = this.initPageX + iRight;
  873. if (iTickSize) { this.setXTicks(this.initPageX, iTickSize); }
  874. this.constrainX = true;
  875. },
  876. <span id='Ext-dd-DragDrop-method-clearConstraints'> /**
  877. </span> * Clears any constraints applied to this instance. Also clears ticks
  878. * since they can't exist independent of a constraint at this time.
  879. */
  880. clearConstraints: function() {
  881. this.constrainX = false;
  882. this.constrainY = false;
  883. this.clearTicks();
  884. },
  885. <span id='Ext-dd-DragDrop-method-clearTicks'> /**
  886. </span> * Clears any tick interval defined for this instance
  887. */
  888. clearTicks: function() {
  889. this.xTicks = null;
  890. this.yTicks = null;
  891. this.xTickSize = 0;
  892. this.yTickSize = 0;
  893. },
  894. <span id='Ext-dd-DragDrop-method-setYConstraint'> /**
  895. </span> * By default, the element can be dragged any place on the screen. Set
  896. * this to limit the vertical travel of the element. Pass in 0,0 for the
  897. * parameters if you want to lock the drag to the x axis.
  898. * @param {Number} iUp the number of pixels the element can move up
  899. * @param {Number} iDown the number of pixels the element can move down
  900. * @param {Number} iTickSize (optional) parameter for specifying that the
  901. * element should move iTickSize pixels at a time.
  902. */
  903. setYConstraint: function(iUp, iDown, iTickSize) {
  904. this.topConstraint = iUp;
  905. this.bottomConstraint = iDown;
  906. this.minY = this.initPageY - iUp;
  907. this.maxY = this.initPageY + iDown;
  908. if (iTickSize) { this.setYTicks(this.initPageY, iTickSize); }
  909. this.constrainY = true;
  910. },
  911. <span id='Ext-dd-DragDrop-method-resetConstraints'> /**
  912. </span> * Must be called if you manually reposition a dd element.
  913. * @param {Boolean} maintainOffset
  914. */
  915. resetConstraints: function() {
  916. // Maintain offsets if necessary
  917. if (this.initPageX || this.initPageX === 0) {
  918. // figure out how much this thing has moved
  919. var dx = (this.maintainOffset) ? this.lastPageX - this.initPageX : 0,
  920. dy = (this.maintainOffset) ? this.lastPageY - this.initPageY : 0;
  921. this.setInitPosition(dx, dy);
  922. // This is the first time we have detected the element's position
  923. } else {
  924. this.setInitPosition();
  925. }
  926. if (this.constrainX) {
  927. this.setXConstraint( this.leftConstraint,
  928. this.rightConstraint,
  929. this.xTickSize );
  930. }
  931. if (this.constrainY) {
  932. this.setYConstraint( this.topConstraint,
  933. this.bottomConstraint,
  934. this.yTickSize );
  935. }
  936. },
  937. <span id='Ext-dd-DragDrop-method-getTick'> /**
  938. </span> * Normally the drag element is moved pixel by pixel, but we can specify
  939. * that it move a number of pixels at a time. This method resolves the
  940. * location when we have it set up like this.
  941. * @param {Number} val where we want to place the object
  942. * @param {Number[]} tickArray sorted array of valid points
  943. * @return {Number} the closest tick
  944. * @private
  945. */
  946. getTick: function(val, tickArray) {
  947. if (!tickArray) {
  948. // If tick interval is not defined, it is effectively 1 pixel,
  949. // so we return the value passed to us.
  950. return val;
  951. } else if (tickArray[0] &gt;= val) {
  952. // The value is lower than the first tick, so we return the first
  953. // tick.
  954. return tickArray[0];
  955. } else {
  956. var i, len, next, diff1, diff2;
  957. for (i=0, len=tickArray.length; i&lt;len; ++i) {
  958. next = i + 1;
  959. if (tickArray[next] &amp;&amp; tickArray[next] &gt;= val) {
  960. diff1 = val - tickArray[i];
  961. diff2 = tickArray[next] - val;
  962. return (diff2 &gt; diff1) ? tickArray[i] : tickArray[next];
  963. }
  964. }
  965. // The value is larger than the last tick, so we return the last
  966. // tick.
  967. return tickArray[tickArray.length - 1];
  968. }
  969. },
  970. <span id='Ext-dd-DragDrop-method-toString'> /**
  971. </span> * toString method
  972. * @return {String} string representation of the dd obj
  973. */
  974. toString: function() {
  975. return (&quot;DragDrop &quot; + this.id);
  976. }
  977. });
  978. </pre>
  979. </body>
  980. </html>