Forum Moderators: open
I've always been buggen by the way Javascript handles events and Mouse movements...
Naturally, if you want to use it yourself, go ahead. This is me getting Javascript to work the way I want after a prior project taught me how it works by default. No guarantees you'll like my approach, as I learned coding with Java 1.4 (not C/C++ like most)
so:
...
Object Oriented event functions stolen from:
[w3future.com...]
...
/* MouseManager class */
function MouseManager () {
this.loc = null;this.update = function () {
if (System.events.lastEvent!= null)
System.mouse.loc = new Location(System.events.lastEvent.clientX, System.events.lastEvent.clientY);
}
}
/* EventControl class */
function EventControl () {
this.MOUSE_MOVE = "mousemove";
this.MOUSE_DOWN = "mousedown";
this.MOUSE_UP = "mouseup";this.lastEvent = null;
this.addListener = function (src, event, action) {
src.addEventListener(event, action, true);
}
this.storeEvent = function (e) {
System.events.lastEvent = e;
}
}
/* System class */
function System () {
System.events = new EventControl();
System.mouse = new MouseManager();System.events.addListener(document, System.events.MOUSE_MOVE, System.events.storeEvent);
System.events.addListener(document, System.events.MOUSE_MOVE, System.mouse.update);
}
System();
/* DraggableLayer class */
// A slightly higher-level class
function DraggableLayer () {
function makeDraggable (elm, gripper) {
if (gripper == null)
gripper = elm;var listener = new DragListener(elm);
System.events.addListener(gripper, System.events.MOUSE_DOWN, listener.mouseDown);
System.events.addListener(gripper, System.events.MOUSE_MOVE, listener.mouseMove);
System.events.addListener(gripper, System.events.MOUSE_UP, listener.mouseUp);
}
function DragListener (elm) {
var me = this;
this.elm = elm;
this.okDrag = false;
this.mouseDown = function () {
me.okDrag = true;
}
this.mouseUp = function () {
me.okDrag = false;
}
this.mouseMove = function () {
if (me.okDrag) {
var newX = System.mouse.loc.x;
var newY = System.mouse.loc.y;
me.elm.style.left = newX + "px";
me.elm.style.top = newY + "px";
}
}
}
}
DraggableLayer();
<!-- Example test -->
<html>
<body>
<ul>
<li id='test' style='position: absolute;'>The rain in spain falls mainly on the plain</li>
<li>The nuclear tests explode mainly in the ocean</li>
</ul>
</body><script type='text/javascript'>
DraggableLayer.makeDraggable(document.getElementById('test'), null);
</script>
</html>
It makes more sense now...
Explanation:
On action, a Wrapper Event class is created. It has a Mouse object which contains data about the mouse (ie: buttons down, location, etc). Likewise will be Keyboard, etc.
When the Wrapper has grabbed what it needs from the Event, it calls the Action it is told to do.
The System class has a root Mouse which is, of course, the position of the mouse relative to the document.
This abstraction should allow anyone to code for anything. Just watch out for the IE memory hole!
function Mouse () {
this.loc = null;
}
function Events () {
Events.MOUSE_MOVE = "mousemove";
Events.MOUSE_DOWN = "mousedown";
Events.MOUSE_UP = "mouseup";
function addListener (src, event, action) {
src.addEventListener(event, (new EventAbstractor(action)).invoke, false);
}
}
Events();
function EventAbstractor (action) {
var me = this;
this.action = action;
this.source;
this.mouse;
this.invoke = function (e) {
me.source = e.target;
me.mouse = new Mouse();
me.mouse.loc = new Location(e.clientX, e.clientY); // todo: mouse loc should be respective to target
me.action(me);
}
}
function System () {
System.mouse = new Mouse();
Events.addListener(document, Events.MOUSE_MOVE, System.mouseUpdate);
function mouseUpdate (e) {
System.mouse.loc = e.mouse.loc;
}
}
System();
