DragPane.js 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. /*
  2. Copyright (c) 2004-2012, The Dojo Foundation All Rights Reserved.
  3. Available via Academic Free License >= 2.1 OR the modified BSD license.
  4. see: http://dojotoolkit.org/license for details
  5. */
  6. if(!dojo._hasResource["dojox.layout.DragPane"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
  7. dojo._hasResource["dojox.layout.DragPane"] = true;
  8. dojo.provide("dojox.layout.DragPane");
  9. dojo.require("dijit._Widget");
  10. dojo.declare("dojox.layout.DragPane", dijit._Widget, {
  11. // summary: Makes a pane's content dragable by/within it's surface
  12. //
  13. // description:
  14. // A small widget which takes a node with overflow:auto and
  15. // allows dragging to position the content. Useful with images,
  16. // or for just adding "something" to a overflow-able div.
  17. //
  18. // invert: Boolean
  19. // Naturally, the behavior is to invert the axis of the drag.
  20. // Setting invert:false will make the pane drag in the same
  21. // direction as the mouse.
  22. invert: true,
  23. postCreate: function(){
  24. this.connect(this.domNode, "onmousedown", "_down");
  25. this.connect(this.domNode, "onmouseleave", "_up");
  26. this.connect(this.domNode, "onmouseup", "_up");
  27. },
  28. _down: function(e){
  29. // summary: mousedown handler, start the dragging
  30. var t = this.domNode;
  31. e.preventDefault();
  32. dojo.style(t, "cursor", "move");
  33. this._x = e.pageX;
  34. this._y = e.pageY;
  35. if ((this._x < t.offsetLeft + t.clientWidth) &&
  36. (this._y < t.offsetTop + t.clientHeight)) {
  37. dojo.setSelectable(t,false);
  38. this._mover = this.connect(t, "onmousemove", "_move");
  39. }
  40. },
  41. _up: function(e){
  42. // summary: mouseup handler, stop the dragging
  43. dojo.setSelectable(this.domNode,true);
  44. dojo.style(this.domNode, "cursor", "pointer");
  45. this._mover && this.disconnect(this._mover);
  46. delete this._mover;
  47. },
  48. _move: function(e){
  49. // summary: mousemove listener, offset the scroll amount by the delta
  50. // since our last call.
  51. var mod = this.invert ? 1 : -1;
  52. this.domNode.scrollTop += (this._y - e.pageY) * mod;
  53. this.domNode.scrollLeft += (this._x - e.pageX) * mod;
  54. this._x = e.pageX;
  55. this._y = e.pageY;
  56. }
  57. });
  58. }