| 1 | /**
|
|---|
| 2 | * Makes a DOM object draggable
|
|---|
| 3 | *
|
|---|
| 4 | * If you just want to move objects around, use drag.attach. For full
|
|---|
| 5 | * customization, drag can be used as a javascript prototype, it is
|
|---|
| 6 | * inheritance-aware.
|
|---|
| 7 | *
|
|---|
| 8 | * @link http://nofunc.org/Drag_Drop/
|
|---|
| 9 | */
|
|---|
| 10 | var drag = {
|
|---|
| 11 | obj: null,
|
|---|
| 12 | handle: null,
|
|---|
| 13 | oX: 0, // object X position
|
|---|
| 14 | oY: 0, // object Y position
|
|---|
| 15 | eX: 0, // event X delta
|
|---|
| 16 | eY: 0, // event Y delta
|
|---|
| 17 |
|
|---|
| 18 | /**
|
|---|
| 19 | * Attaches the needed handlers to the given object
|
|---|
| 20 | *
|
|---|
| 21 | * This can be called for multiple objects, the right one is later
|
|---|
| 22 | * determined from the event itself. The handle is optional
|
|---|
| 23 | *
|
|---|
| 24 | * @param DOMObject obj The object that should be draggable
|
|---|
| 25 | * @param DOMObject handle A handle on which the obj can be dragged
|
|---|
| 26 | */
|
|---|
| 27 | attach: function (obj,handle) {
|
|---|
| 28 | if(handle){
|
|---|
| 29 | handle.dragobject = obj;
|
|---|
| 30 | }else{
|
|---|
| 31 | handle = obj;
|
|---|
| 32 | }
|
|---|
| 33 | var _this = this;
|
|---|
| 34 | addEvent($(handle),'mousedown',function (e) {return _this.start(e); });
|
|---|
| 35 | },
|
|---|
| 36 |
|
|---|
| 37 | /**
|
|---|
| 38 | * Starts the dragging operation
|
|---|
| 39 | */
|
|---|
| 40 | start: function (e){
|
|---|
| 41 | this.handle = e.target;
|
|---|
| 42 | if(this.handle.dragobject){
|
|---|
| 43 | this.obj = this.handle.dragobject;
|
|---|
| 44 | }else{
|
|---|
| 45 | this.obj = this.handle;
|
|---|
| 46 | }
|
|---|
| 47 |
|
|---|
| 48 | this.handle.className += ' ondrag';
|
|---|
| 49 | this.obj.className += ' ondrag';
|
|---|
| 50 |
|
|---|
| 51 | this.oX = parseInt(this.obj.style.left);
|
|---|
| 52 | this.oY = parseInt(this.obj.style.top);
|
|---|
| 53 | this.eX = e.pageX;
|
|---|
| 54 | this.eY = e.pageY;
|
|---|
| 55 |
|
|---|
| 56 | var _this = this;
|
|---|
| 57 | this.mousehandlers = [function (e) {return _this.drag(e);}, function (e) {return _this.stop(e);}];
|
|---|
| 58 | addEvent(document,'mousemove', this.mousehandlers[0]);
|
|---|
| 59 | addEvent(document,'mouseup', this.mousehandlers[1]);
|
|---|
| 60 |
|
|---|
| 61 | return false;
|
|---|
| 62 | },
|
|---|
| 63 |
|
|---|
| 64 | /**
|
|---|
| 65 | * Ends the dragging operation
|
|---|
| 66 | */
|
|---|
| 67 | stop: function(){
|
|---|
| 68 | this.handle.className = this.handle.className.replace(/ ?ondrag/,'');
|
|---|
| 69 | this.obj.className = this.obj.className.replace(/ ?ondrag/,'');
|
|---|
| 70 | removeEvent(document,'mousemove', this.mousehandlers[0]);
|
|---|
| 71 | removeEvent(document,'mouseup', this.mousehandlers[1]);
|
|---|
| 72 | this.obj = null;
|
|---|
| 73 | this.handle = null;
|
|---|
| 74 | },
|
|---|
| 75 |
|
|---|
| 76 | /**
|
|---|
| 77 | * Moves the object during the dragging operation
|
|---|
| 78 | */
|
|---|
| 79 | drag: function(e) {
|
|---|
| 80 | if(this.obj) {
|
|---|
| 81 | this.obj.style.top = (e.pageY+this.oY-this.eY+'px');
|
|---|
| 82 | this.obj.style.left = (e.pageX+this.oX-this.eX+'px');
|
|---|
| 83 | }
|
|---|
| 84 | }
|
|---|
| 85 | };
|
|---|
