From 0b0fbf677e031723a4a9c5b2d194d7d7fda5d7c6 Mon Sep 17 00:00:00 2001
From: Adrian Lang <lang@cosmocode.de>
Date: Fri, 27 Nov 2009 12:24:02 +0100
Subject: [PATCH] Make drag inheritable
darcs-hash:20091127112402-e4919-dc8340c03ef2d3b242302dcc228d56539eaf9e28.gz
---
lib/scripts/drag.js | 55 ++++++++++++++++++++++++---------------------
1 file changed, 29 insertions(+), 26 deletions(-)
diff --git a/lib/scripts/drag.js b/lib/scripts/drag.js
index 4726b77de..fa249a996 100644
--- a/lib/scripts/drag.js
+++ b/lib/scripts/drag.js
@@ -1,8 +1,9 @@
/**
* Makes a DOM object draggable
*
- * This is currently for movable DOM dialogs only. If needed it could be
- * extended to execute callbacks on special events...
+ * If you just want to move objects around, use drag.attach. For full
+ * customization, drag can be used as a javascript prototype, it is
+ * inheritance-aware.
*
* @link http://nofunc.org/Drag_Drop/
*/
@@ -26,33 +27,36 @@ var drag = {
attach: function (obj,handle) {
if(handle){
handle.dragobject = obj;
- addEvent($(handle),'mousedown',drag.start);
}else{
- addEvent($(obj),'mousedown',drag.start);
+ handle = obj;
}
+ var _this = this;
+ addEvent($(handle),'mousedown',function (e) {return _this.start(e); });
},
/**
* Starts the dragging operation
*/
start: function (e){
- drag.handle = e.target;
- if(drag.handle.dragobject){
- drag.obj = drag.handle.dragobject;
+ this.handle = e.target;
+ if(this.handle.dragobject){
+ this.obj = this.handle.dragobject;
}else{
- drag.obj = drag.handle;
+ this.obj = this.handle;
}
- drag.handle.className += ' ondrag';
- drag.obj.className += ' ondrag';
+ this.handle.className += ' ondrag';
+ this.obj.className += ' ondrag';
- drag.oX = parseInt(drag.obj.style.left);
- drag.oY = parseInt(drag.obj.style.top);
- drag.eX = drag.evX(e);
- drag.eY = drag.evY(e);
+ this.oX = parseInt(this.obj.style.left);
+ this.oY = parseInt(this.obj.style.top);
+ this.eX = drag.evX(e);
+ this.eY = drag.evY(e);
- addEvent(document,'mousemove',drag.drag);
- addEvent(document,'mouseup',drag.stop);
+ var _this = this;
+ this.mousehandlers = [function (e) {return _this.drag(e);}, function (e) {return _this.stop(e);}];
+ addEvent(document,'mousemove', this.mousehandlers[0]);
+ addEvent(document,'mouseup', this.mousehandlers[1]);
e.preventDefault();
e.stopPropagation();
@@ -63,21 +67,21 @@ var drag = {
* Ends the dragging operation
*/
stop: function(){
- drag.handle.className = drag.handle.className.replace(/ ?ondrag/,'');
- drag.obj.className = drag.obj.className.replace(/ ?ondrag/,'');
- removeEvent(document,'mousemove',drag.drag);
- removeEvent(document,'mouseup',drag.stop);
- drag.obj = null;
- drag.handle = null;
+ this.handle.className = this.handle.className.replace(/ ?ondrag/,'');
+ this.obj.className = this.obj.className.replace(/ ?ondrag/,'');
+ removeEvent(document,'mousemove', this.mousehandlers[0]);
+ removeEvent(document,'mouseup', this.mousehandlers[1]);
+ this.obj = null;
+ this.handle = null;
},
/**
* Moves the object during the dragging operation
*/
drag: function(e) {
- if(drag.obj) {
- drag.obj.style.top = (drag.evY(e)+drag.oY-drag.eY+'px');
- drag.obj.style.left = (drag.evX(e)+drag.oX-drag.eX+'px');
+ if(this.obj) {
+ this.obj.style.top = (this.evY(e)+this.oY-this.eY+'px');
+ this.obj.style.left = (this.evX(e)+this.oX-this.eX+'px');
}
},
@@ -96,4 +100,3 @@ var drag = {
}
};
-
--
GitLab