DragAndDrop.js 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822
  1. /***
  2. MochiKit.DragAndDrop 1.4
  3. See <http://mochikit.com/> for documentation, downloads, license, etc.
  4. Copyright (c) 2005 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
  5. Mochi-ized By Thomas Herve (_firstname_@nimail.org)
  6. ***/
  7. if (typeof(dojo) != 'undefined') {
  8. dojo.provide('MochiKit.DragAndDrop');
  9. dojo.require('MochiKit.Base');
  10. dojo.require('MochiKit.DOM');
  11. dojo.require('MochiKit.Iter');
  12. dojo.require('MochiKit.Visual');
  13. dojo.require('MochiKit.Signal');
  14. }
  15. if (typeof(JSAN) != 'undefined') {
  16. JSAN.use("MochiKit.Base", []);
  17. JSAN.use("MochiKit.DOM", []);
  18. JSAN.use("MochiKit.Visual", []);
  19. JSAN.use("MochiKit.Iter", []);
  20. JSAN.use("MochiKit.Signal", []);
  21. }
  22. try {
  23. if (typeof(MochiKit.Base) == 'undefined' ||
  24. typeof(MochiKit.DOM) == 'undefined' ||
  25. typeof(MochiKit.Visual) == 'undefined' ||
  26. typeof(MochiKit.Signal) == 'undefined' ||
  27. typeof(MochiKit.Iter) == 'undefined') {
  28. throw "";
  29. }
  30. } catch (e) {
  31. throw "MochiKit.DragAndDrop depends on MochiKit.Base, MochiKit.DOM, MochiKit.Visual, MochiKit.Signal and MochiKit.Iter!";
  32. }
  33. if (typeof(MochiKit.DragAndDrop) == 'undefined') {
  34. MochiKit.DragAndDrop = {};
  35. }
  36. MochiKit.DragAndDrop.NAME = 'MochiKit.DragAndDrop';
  37. MochiKit.DragAndDrop.VERSION = '1.4';
  38. MochiKit.DragAndDrop.__repr__ = function () {
  39. return '[' + this.NAME + ' ' + this.VERSION + ']';
  40. };
  41. MochiKit.DragAndDrop.toString = function () {
  42. return this.__repr__();
  43. };
  44. MochiKit.DragAndDrop.EXPORT = [
  45. "Droppable",
  46. "Draggable"
  47. ];
  48. MochiKit.DragAndDrop.EXPORT_OK = [
  49. "Droppables",
  50. "Draggables"
  51. ];
  52. MochiKit.DragAndDrop.Droppables = {
  53. /***
  54. Manage all droppables. Shouldn't be used, use the Droppable object instead.
  55. ***/
  56. drops: [],
  57. remove: function (element) {
  58. this.drops = MochiKit.Base.filter(function (d) {
  59. return d.element != MochiKit.DOM.getElement(element)
  60. }, this.drops);
  61. },
  62. register: function (drop) {
  63. this.drops.push(drop);
  64. },
  65. unregister: function (drop) {
  66. this.drops = MochiKit.Base.filter(function (d) {
  67. return d != drop;
  68. }, this.drops);
  69. },
  70. prepare: function (element) {
  71. MochiKit.Base.map(function (drop) {
  72. if (drop.isAccepted(element)) {
  73. if (drop.options.activeclass) {
  74. MochiKit.DOM.addElementClass(drop.element,
  75. drop.options.activeclass);
  76. }
  77. drop.options.onactive(drop.element, element);
  78. }
  79. }, this.drops);
  80. },
  81. findDeepestChild: function (drops) {
  82. deepest = drops[0];
  83. for (i = 1; i < drops.length; ++i) {
  84. if (MochiKit.DOM.isParent(drops[i].element, deepest.element)) {
  85. deepest = drops[i];
  86. }
  87. }
  88. return deepest;
  89. },
  90. show: function (point, element) {
  91. if (!this.drops.length) {
  92. return;
  93. }
  94. var affected = [];
  95. if (this.last_active) {
  96. this.last_active.deactivate();
  97. }
  98. MochiKit.Iter.forEach(this.drops, function (drop) {
  99. if (drop.isAffected(point, element)) {
  100. affected.push(drop);
  101. }
  102. });
  103. if (affected.length > 0) {
  104. drop = this.findDeepestChild(affected);
  105. MochiKit.Position.within(drop.element, point.page.x, point.page.y);
  106. drop.options.onhover(element, drop.element,
  107. MochiKit.Position.overlap(drop.options.overlap, drop.element));
  108. drop.activate();
  109. }
  110. },
  111. fire: function (event, element) {
  112. if (!this.last_active) {
  113. return;
  114. }
  115. MochiKit.Position.prepare();
  116. if (this.last_active.isAffected(event.mouse(), element)) {
  117. this.last_active.options.ondrop(element,
  118. this.last_active.element, event);
  119. }
  120. },
  121. reset: function (element) {
  122. MochiKit.Base.map(function (drop) {
  123. if (drop.options.activeclass) {
  124. MochiKit.DOM.removeElementClass(drop.element,
  125. drop.options.activeclass);
  126. }
  127. drop.options.ondesactive(drop.element, element);
  128. }, this.drops);
  129. if (this.last_active) {
  130. this.last_active.deactivate();
  131. }
  132. }
  133. };
  134. /** @id MochiKit.DragAndDrop.Droppable */
  135. MochiKit.DragAndDrop.Droppable = function (element, options) {
  136. this.__init__(element, options);
  137. };
  138. MochiKit.DragAndDrop.Droppable.prototype = {
  139. /***
  140. A droppable object. Simple use is to create giving an element:
  141. new MochiKit.DragAndDrop.Droppable('myelement');
  142. Generally you'll want to define the 'ondrop' function and maybe the
  143. 'accept' option to filter draggables.
  144. ***/
  145. __class__: MochiKit.DragAndDrop.Droppable,
  146. __init__: function (element, /* optional */options) {
  147. var d = MochiKit.DOM;
  148. var b = MochiKit.Base;
  149. this.element = d.getElement(element);
  150. this.options = b.update({
  151. /** @id MochiKit.DragAndDrop.greedy */
  152. greedy: true,
  153. /** @id MochiKit.DragAndDrop.hoverclass */
  154. hoverclass: null,
  155. /** @id MochiKit.DragAndDrop.activeclass */
  156. activeclass: null,
  157. /** @id MochiKit.DragAndDrop.hoverfunc */
  158. hoverfunc: b.noop,
  159. /** @id MochiKit.DragAndDrop.accept */
  160. accept: null,
  161. /** @id MochiKit.DragAndDrop.onactive */
  162. onactive: b.noop,
  163. /** @id MochiKit.DragAndDrop.ondesactive */
  164. ondesactive: b.noop,
  165. /** @id MochiKit.DragAndDrop.onhover */
  166. onhover: b.noop,
  167. /** @id MochiKit.DragAndDrop.ondrop */
  168. ondrop: b.noop,
  169. /** @id MochiKit.DragAndDrop.containment */
  170. containment: [],
  171. tree: false
  172. }, options || {});
  173. // cache containers
  174. this.options._containers = [];
  175. b.map(MochiKit.Base.bind(function (c) {
  176. this.options._containers.push(d.getElement(c));
  177. }, this), this.options.containment);
  178. d.makePositioned(this.element); // fix IE
  179. MochiKit.DragAndDrop.Droppables.register(this);
  180. },
  181. /** @id MochiKit.DragAndDrop.isContained */
  182. isContained: function (element) {
  183. if (this.options._containers.length) {
  184. var containmentNode;
  185. if (this.options.tree) {
  186. containmentNode = element.treeNode;
  187. } else {
  188. containmentNode = element.parentNode;
  189. }
  190. return MochiKit.Iter.some(this.options._containers, function (c) {
  191. return containmentNode == c;
  192. });
  193. } else {
  194. return true;
  195. }
  196. },
  197. /** @id MochiKit.DragAndDrop.isAccepted */
  198. isAccepted: function (element) {
  199. return ((!this.options.accept) || MochiKit.Iter.some(
  200. this.options.accept, function (c) {
  201. return MochiKit.DOM.hasElementClass(element, c);
  202. }));
  203. },
  204. /** @id MochiKit.DragAndDrop.isAffected */
  205. isAffected: function (point, element) {
  206. return ((this.element != element) &&
  207. this.isContained(element) &&
  208. this.isAccepted(element) &&
  209. MochiKit.Position.within(this.element, point.page.x,
  210. point.page.y));
  211. },
  212. /** @id MochiKit.DragAndDrop.deactivate */
  213. deactivate: function () {
  214. /***
  215. A droppable is deactivate when a draggable has been over it and left.
  216. ***/
  217. if (this.options.hoverclass) {
  218. MochiKit.DOM.removeElementClass(this.element,
  219. this.options.hoverclass);
  220. }
  221. this.options.hoverfunc(this.element, false);
  222. MochiKit.DragAndDrop.Droppables.last_active = null;
  223. },
  224. /** @id MochiKit.DragAndDrop.activate */
  225. activate: function () {
  226. /***
  227. A droppable is active when a draggable is over it.
  228. ***/
  229. if (this.options.hoverclass) {
  230. MochiKit.DOM.addElementClass(this.element, this.options.hoverclass);
  231. }
  232. this.options.hoverfunc(this.element, true);
  233. MochiKit.DragAndDrop.Droppables.last_active = this;
  234. },
  235. /** @id MochiKit.DragAndDrop.destroy */
  236. destroy: function () {
  237. /***
  238. Delete this droppable.
  239. ***/
  240. MochiKit.DragAndDrop.Droppables.unregister(this);
  241. },
  242. /** @id MochiKit.DragAndDrop.repr */
  243. repr: function () {
  244. return '[' + this.__class__.NAME + ", options:" + MochiKit.Base.repr(this.options) + "]";
  245. }
  246. };
  247. MochiKit.DragAndDrop.Draggables = {
  248. /***
  249. Manage draggables elements. Not intended to direct use.
  250. ***/
  251. drags: [],
  252. register: function (draggable) {
  253. if (this.drags.length === 0) {
  254. var conn = MochiKit.Signal.connect;
  255. this.eventMouseUp = conn(document, 'onmouseup', this, this.endDrag);
  256. this.eventMouseMove = conn(document, 'onmousemove', this,
  257. this.updateDrag);
  258. this.eventKeypress = conn(document, 'onkeypress', this,
  259. this.keyPress);
  260. }
  261. this.drags.push(draggable);
  262. },
  263. unregister: function (draggable) {
  264. this.drags = MochiKit.Base.filter(function (d) {
  265. return d != draggable;
  266. }, this.drags);
  267. if (this.drags.length === 0) {
  268. var disc = MochiKit.Signal.disconnect
  269. disc(this.eventMouseUp);
  270. disc(this.eventMouseMove);
  271. disc(this.eventKeypress);
  272. }
  273. },
  274. activate: function (draggable) {
  275. // allows keypress events if window is not currently focused
  276. // fails for Safari
  277. window.focus();
  278. this.activeDraggable = draggable;
  279. },
  280. deactivate: function () {
  281. this.activeDraggable = null;
  282. },
  283. updateDrag: function (event) {
  284. if (!this.activeDraggable) {
  285. return;
  286. }
  287. var pointer = event.mouse();
  288. // Mozilla-based browsers fire successive mousemove events with
  289. // the same coordinates, prevent needless redrawing (moz bug?)
  290. if (this._lastPointer && (MochiKit.Base.repr(this._lastPointer.page) ==
  291. MochiKit.Base.repr(pointer.page))) {
  292. return;
  293. }
  294. this._lastPointer = pointer;
  295. this.activeDraggable.updateDrag(event, pointer);
  296. },
  297. endDrag: function (event) {
  298. if (!this.activeDraggable) {
  299. return;
  300. }
  301. this._lastPointer = null;
  302. this.activeDraggable.endDrag(event);
  303. this.activeDraggable = null;
  304. },
  305. keyPress: function (event) {
  306. if (this.activeDraggable) {
  307. this.activeDraggable.keyPress(event);
  308. }
  309. },
  310. notify: function (eventName, draggable, event) {
  311. MochiKit.Signal.signal(this, eventName, draggable, event);
  312. }
  313. };
  314. /** @id MochiKit.DragAndDrop.Draggable */
  315. MochiKit.DragAndDrop.Draggable = function (element, options) {
  316. this.__init__(element, options);
  317. };
  318. MochiKit.DragAndDrop.Draggable.prototype = {
  319. /***
  320. A draggable object. Simple instantiate :
  321. new MochiKit.DragAndDrop.Draggable('myelement');
  322. ***/
  323. __class__ : MochiKit.DragAndDrop.Draggable,
  324. __init__: function (element, /* optional */options) {
  325. var v = MochiKit.Visual;
  326. var b = MochiKit.Base;
  327. options = b.update({
  328. /** @id MochiKit.DragAndDrop.handle */
  329. handle: false,
  330. /** @id MochiKit.DragAndDrop.starteffect */
  331. starteffect: function (innerelement) {
  332. this._savedOpacity = MochiKit.Style.getOpacity(innerelement) || 1.0;
  333. new v.Opacity(innerelement, {duration:0.2, from:this._savedOpacity, to:0.7});
  334. },
  335. /** @id MochiKit.DragAndDrop.reverteffect */
  336. reverteffect: function (innerelement, top_offset, left_offset) {
  337. var dur = Math.sqrt(Math.abs(top_offset^2) +
  338. Math.abs(left_offset^2))*0.02;
  339. return new v.Move(innerelement,
  340. {x: -left_offset, y: -top_offset, duration: dur});
  341. },
  342. /** @id MochiKit.DragAndDrop.endeffect */
  343. endeffect: function (innerelement) {
  344. new v.Opacity(innerelement, {duration:0.2, from:0.7, to:this._savedOpacity});
  345. },
  346. /** @id MochiKit.DragAndDrop.onchange */
  347. onchange: b.noop,
  348. /** @id MochiKit.DragAndDrop.zindex */
  349. zindex: 1000,
  350. /** @id MochiKit.DragAndDrop.revert */
  351. revert: false,
  352. /** @id MochiKit.DragAndDrop.scroll */
  353. scroll: false,
  354. /** @id MochiKit.DragAndDrop.scrollSensitivity */
  355. scrollSensitivity: 20,
  356. /** @id MochiKit.DragAndDrop.scrollSpeed */
  357. scrollSpeed: 15,
  358. // false, or xy or [x, y] or function (x, y){return [x, y];}
  359. /** @id MochiKit.DragAndDrop.snap */
  360. snap: false
  361. }, options || {});
  362. var d = MochiKit.DOM;
  363. this.element = d.getElement(element);
  364. if (options.handle && (typeof(options.handle) == 'string')) {
  365. this.handle = d.getFirstElementByTagAndClassName(null,
  366. options.handle, this.element);
  367. }
  368. if (!this.handle) {
  369. this.handle = d.getElement(options.handle);
  370. }
  371. if (!this.handle) {
  372. this.handle = this.element;
  373. }
  374. if (options.scroll && !options.scroll.scrollTo && !options.scroll.outerHTML) {
  375. options.scroll = d.getElement(options.scroll);
  376. this._isScrollChild = MochiKit.DOM.isChildNode(this.element, options.scroll);
  377. }
  378. d.makePositioned(this.element); // fix IE
  379. this.delta = this.currentDelta();
  380. this.options = options;
  381. this.dragging = false;
  382. this.eventMouseDown = MochiKit.Signal.connect(this.handle,
  383. 'onmousedown', this, this.initDrag);
  384. MochiKit.DragAndDrop.Draggables.register(this);
  385. },
  386. /** @id MochiKit.DragAndDrop.destroy */
  387. destroy: function () {
  388. MochiKit.Signal.disconnect(this.eventMouseDown);
  389. MochiKit.DragAndDrop.Draggables.unregister(this);
  390. },
  391. /** @id MochiKit.DragAndDrop.currentDelta */
  392. currentDelta: function () {
  393. var s = MochiKit.Style.getStyle;
  394. return [
  395. parseInt(s(this.element, 'left') || '0'),
  396. parseInt(s(this.element, 'top') || '0')];
  397. },
  398. /** @id MochiKit.DragAndDrop.initDrag */
  399. initDrag: function (event) {
  400. if (!event.mouse().button.left) {
  401. return;
  402. }
  403. // abort on form elements, fixes a Firefox issue
  404. var src = event.target();
  405. var tagName = (src.tagName || '').toUpperCase();
  406. if (tagName === 'INPUT' || tagName === 'SELECT' ||
  407. tagName === 'OPTION' || tagName === 'BUTTON' ||
  408. tagName === 'TEXTAREA') {
  409. return;
  410. }
  411. if (this._revert) {
  412. this._revert.cancel();
  413. this._revert = null;
  414. }
  415. var pointer = event.mouse();
  416. var pos = MochiKit.Position.cumulativeOffset(this.element);
  417. this.offset = [pointer.page.x - pos.x, pointer.page.y - pos.y]
  418. MochiKit.DragAndDrop.Draggables.activate(this);
  419. event.stop();
  420. },
  421. /** @id MochiKit.DragAndDrop.startDrag */
  422. startDrag: function (event) {
  423. this.dragging = true;
  424. if (this.options.selectclass) {
  425. MochiKit.DOM.addElementClass(this.element,
  426. this.options.selectclass);
  427. }
  428. if (this.options.zindex) {
  429. this.originalZ = parseInt(MochiKit.Style.getStyle(this.element,
  430. 'z-index') || '0');
  431. this.element.style.zIndex = this.options.zindex;
  432. }
  433. if (this.options.ghosting) {
  434. this._clone = this.element.cloneNode(true);
  435. this.ghostPosition = MochiKit.Position.absolutize(this.element);
  436. this.element.parentNode.insertBefore(this._clone, this.element);
  437. }
  438. if (this.options.scroll) {
  439. if (this.options.scroll == window) {
  440. var where = this._getWindowScroll(this.options.scroll);
  441. this.originalScrollLeft = where.left;
  442. this.originalScrollTop = where.top;
  443. } else {
  444. this.originalScrollLeft = this.options.scroll.scrollLeft;
  445. this.originalScrollTop = this.options.scroll.scrollTop;
  446. }
  447. }
  448. MochiKit.DragAndDrop.Droppables.prepare(this.element);
  449. MochiKit.DragAndDrop.Draggables.notify('start', this, event);
  450. if (this.options.starteffect) {
  451. this.options.starteffect(this.element);
  452. }
  453. },
  454. /** @id MochiKit.DragAndDrop.updateDrag */
  455. updateDrag: function (event, pointer) {
  456. if (!this.dragging) {
  457. this.startDrag(event);
  458. }
  459. MochiKit.Position.prepare();
  460. MochiKit.DragAndDrop.Droppables.show(pointer, this.element);
  461. MochiKit.DragAndDrop.Draggables.notify('drag', this, event);
  462. this.draw(pointer);
  463. this.options.onchange(this);
  464. if (this.options.scroll) {
  465. this.stopScrolling();
  466. var p, q;
  467. if (this.options.scroll == window) {
  468. var s = this._getWindowScroll(this.options.scroll);
  469. p = new MochiKit.Style.Coordinates(s.left, s.top);
  470. q = new MochiKit.Style.Coordinates(s.left + s.width,
  471. s.top + s.height);
  472. } else {
  473. p = MochiKit.Position.page(this.options.scroll);
  474. p.x += this.options.scroll.scrollLeft;
  475. p.y += this.options.scroll.scrollTop;
  476. p.x += (window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0);
  477. p.y += (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0);
  478. q = new MochiKit.Style.Coordinates(p.x + this.options.scroll.offsetWidth,
  479. p.y + this.options.scroll.offsetHeight);
  480. }
  481. var speed = [0, 0];
  482. if (pointer.page.x > (q.x - this.options.scrollSensitivity)) {
  483. speed[0] = pointer.page.x - (q.x - this.options.scrollSensitivity);
  484. } else if (pointer.page.x < (p.x + this.options.scrollSensitivity)) {
  485. speed[0] = pointer.page.x - (p.x + this.options.scrollSensitivity);
  486. }
  487. if (pointer.page.y > (q.y - this.options.scrollSensitivity)) {
  488. speed[1] = pointer.page.y - (q.y - this.options.scrollSensitivity);
  489. } else if (pointer.page.y < (p.y + this.options.scrollSensitivity)) {
  490. speed[1] = pointer.page.y - (p.y + this.options.scrollSensitivity);
  491. }
  492. this.startScrolling(speed);
  493. }
  494. // fix AppleWebKit rendering
  495. if (/AppleWebKit'/.test(navigator.appVersion)) {
  496. window.scrollBy(0, 0);
  497. }
  498. event.stop();
  499. },
  500. /** @id MochiKit.DragAndDrop.finishDrag */
  501. finishDrag: function (event, success) {
  502. var dr = MochiKit.DragAndDrop;
  503. this.dragging = false;
  504. if (this.options.selectclass) {
  505. MochiKit.DOM.removeElementClass(this.element,
  506. this.options.selectclass);
  507. }
  508. if (this.options.ghosting) {
  509. // XXX: from a user point of view, it would be better to remove
  510. // the node only *after* the MochiKit.Visual.Move end when used
  511. // with revert.
  512. MochiKit.Position.relativize(this.element, this.ghostPosition);
  513. MochiKit.DOM.removeElement(this._clone);
  514. this._clone = null;
  515. }
  516. if (success) {
  517. dr.Droppables.fire(event, this.element);
  518. }
  519. dr.Draggables.notify('end', this, event);
  520. var revert = this.options.revert;
  521. if (revert && typeof(revert) == 'function') {
  522. revert = revert(this.element);
  523. }
  524. var d = this.currentDelta();
  525. if (revert && this.options.reverteffect) {
  526. this._revert = this.options.reverteffect(this.element,
  527. d[1] - this.delta[1], d[0] - this.delta[0]);
  528. } else {
  529. this.delta = d;
  530. }
  531. if (this.options.zindex) {
  532. this.element.style.zIndex = this.originalZ;
  533. }
  534. if (this.options.endeffect) {
  535. this.options.endeffect(this.element);
  536. }
  537. dr.Draggables.deactivate();
  538. dr.Droppables.reset(this.element);
  539. },
  540. /** @id MochiKit.DragAndDrop.keyPress */
  541. keyPress: function (event) {
  542. if (event.key().string != "KEY_ESCAPE") {
  543. return;
  544. }
  545. this.finishDrag(event, false);
  546. event.stop();
  547. },
  548. /** @id MochiKit.DragAndDrop.endDrag */
  549. endDrag: function (event) {
  550. if (!this.dragging) {
  551. return;
  552. }
  553. this.stopScrolling();
  554. this.finishDrag(event, true);
  555. event.stop();
  556. },
  557. /** @id MochiKit.DragAndDrop.draw */
  558. draw: function (point) {
  559. var pos = MochiKit.Position.cumulativeOffset(this.element);
  560. if (this.options.ghosting) {
  561. var r = MochiKit.Position.realOffset(this.element);
  562. pos.x += r.x - MochiKit.Position.windowOffset.x;
  563. pos.y += r.y - MochiKit.Position.windowOffset.y;
  564. }
  565. var d = this.currentDelta();
  566. pos.x -= d[0];
  567. pos.y -= d[1];
  568. if (this.options.scroll && (this.options.scroll != window && this._isScrollChild)) {
  569. pos.x -= this.options.scroll.scrollLeft - this.originalScrollLeft;
  570. pos.y -= this.options.scroll.scrollTop - this.originalScrollTop;
  571. }
  572. var p = [point.page.x - pos.x - this.offset[0],
  573. point.page.y - pos.y - this.offset[1]]
  574. if (this.options.snap) {
  575. if (typeof(this.options.snap) == 'function') {
  576. p = this.options.snap(p[0], p[1]);
  577. } else {
  578. if (this.options.snap instanceof Array) {
  579. var i = -1;
  580. p = MochiKit.Base.map(MochiKit.Base.bind(function (v) {
  581. i += 1;
  582. return Math.round(v/this.options.snap[i]) *
  583. this.options.snap[i]
  584. }, this), p)
  585. } else {
  586. p = MochiKit.Base.map(MochiKit.Base.bind(function (v) {
  587. return Math.round(v/this.options.snap) *
  588. this.options.snap
  589. }, this), p)
  590. }
  591. }
  592. }
  593. var style = this.element.style;
  594. if ((!this.options.constraint) ||
  595. (this.options.constraint == 'horizontal')) {
  596. style.left = p[0] + 'px';
  597. }
  598. if ((!this.options.constraint) ||
  599. (this.options.constraint == 'vertical')) {
  600. style.top = p[1] + 'px';
  601. }
  602. if (style.visibility == 'hidden') {
  603. style.visibility = ''; // fix gecko rendering
  604. }
  605. },
  606. /** @id MochiKit.DragAndDrop.stopScrolling */
  607. stopScrolling: function () {
  608. if (this.scrollInterval) {
  609. clearInterval(this.scrollInterval);
  610. this.scrollInterval = null;
  611. MochiKit.DragAndDrop.Draggables._lastScrollPointer = null;
  612. }
  613. },
  614. /** @id MochiKit.DragAndDrop.startScrolling */
  615. startScrolling: function (speed) {
  616. if (!speed[0] && !speed[1]) {
  617. return;
  618. }
  619. this.scrollSpeed = [speed[0] * this.options.scrollSpeed,
  620. speed[1] * this.options.scrollSpeed];
  621. this.lastScrolled = new Date();
  622. this.scrollInterval = setInterval(MochiKit.Base.bind(this.scroll, this), 10);
  623. },
  624. /** @id MochiKit.DragAndDrop.scroll */
  625. scroll: function () {
  626. var current = new Date();
  627. var delta = current - this.lastScrolled;
  628. this.lastScrolled = current;
  629. if (this.options.scroll == window) {
  630. var s = this._getWindowScroll(this.options.scroll);
  631. if (this.scrollSpeed[0] || this.scrollSpeed[1]) {
  632. var d = delta / 1000;
  633. this.options.scroll.scrollTo(s.left + d * this.scrollSpeed[0],
  634. s.top + d * this.scrollSpeed[1]);
  635. }
  636. } else {
  637. this.options.scroll.scrollLeft += this.scrollSpeed[0] * delta / 1000;
  638. this.options.scroll.scrollTop += this.scrollSpeed[1] * delta / 1000;
  639. }
  640. var d = MochiKit.DragAndDrop;
  641. MochiKit.Position.prepare();
  642. d.Droppables.show(d.Draggables._lastPointer, this.element);
  643. d.Draggables.notify('drag', this);
  644. if (this._isScrollChild) {
  645. d.Draggables._lastScrollPointer = d.Draggables._lastScrollPointer || d.Draggables._lastPointer;
  646. d.Draggables._lastScrollPointer.x += this.scrollSpeed[0] * delta / 1000;
  647. d.Draggables._lastScrollPointer.y += this.scrollSpeed[1] * delta / 1000;
  648. if (d.Draggables._lastScrollPointer.x < 0) {
  649. d.Draggables._lastScrollPointer.x = 0;
  650. }
  651. if (d.Draggables._lastScrollPointer.y < 0) {
  652. d.Draggables._lastScrollPointer.y = 0;
  653. }
  654. this.draw(d.Draggables._lastScrollPointer);
  655. }
  656. this.options.onchange(this);
  657. },
  658. _getWindowScroll: function (w) {
  659. var vp, w, h;
  660. MochiKit.DOM.withWindow(w, function () {
  661. vp = MochiKit.Style.getViewportPosition(w.document);
  662. });
  663. if (w.innerWidth) {
  664. w = w.innerWidth;
  665. h = w.innerHeight;
  666. } else if (w.document.documentElement && w.document.documentElement.clientWidth) {
  667. w = w.document.documentElement.clientWidth;
  668. h = w.document.documentElement.clientHeight;
  669. } else {
  670. w = w.document.body.offsetWidth;
  671. h = w.document.body.offsetHeight
  672. }
  673. return {top: vp.x, left: vp.y, width: w, height: h};
  674. },
  675. /** @id MochiKit.DragAndDrop.repr */
  676. repr: function () {
  677. return '[' + this.__class__.NAME + ", options:" + MochiKit.Base.repr(this.options) + "]";
  678. }
  679. };
  680. MochiKit.DragAndDrop.__new__ = function () {
  681. MochiKit.Base.nameFunctions(this);
  682. this.EXPORT_TAGS = {
  683. ":common": this.EXPORT,
  684. ":all": MochiKit.Base.concat(this.EXPORT, this.EXPORT_OK)
  685. };
  686. };
  687. MochiKit.DragAndDrop.__new__();
  688. MochiKit.Base._exportSymbols(this, MochiKit.DragAndDrop);