dojo.provide("dojox.layout.DragPane"); dojo.require("dijit._Widget"); dojo.declare("dojox.layout.DragPane", dijit._Widget, { // // summary: Makes a pane's content dragable by/within it's surface // // description: // A small widget which takes a node with overflow:auto and // allows dragging to position the content. Useful with images, // or for just adding "something" to a overflow-able div. // // invert: Boolean // Naturally, the behavior is to invert the axis of the drag. // Setting invert:false will make the pane drag in the same // direction as the mouse. invert:true, postCreate: function(){ this.inherited(arguments); this.connect(this.domNode,"onmousedown","_down"); this.connect(this.domNode,"onmouseup","_up"); }, _down: function(e){ // summary: mousedown handler, start the dragging var t = this.domNode; dojo.style(t,"cursor","move"); this._x = e.pageX; this._y = e.pageY; if ((this._x < t.offsetLeft + t.clientWidth) && (this._y < t.offsetTop + t.clientHeight)) { dojo.setSelectable(t,false); this._mover = this.connect(t,"onmousemove","_move"); } }, _up: function(e){ // summary: mouseup handler, stop the dragging dojo.setSelectable(this.domNode,true); dojo.style(this.domNode,"cursor","pointer"); this.disconnect(this._mover); }, _move: function(e){ // summary: mousemove listener, offset the scroll amount by the delta // since our last call. var mod = this.invert ? 1 : -1; this.domNode.scrollTop += (this._y - e.pageY) * mod; this.domNode.scrollLeft += (this._x - e.pageX) * mod; this._x = e.pageX; this._y = e.pageY; } });