C
c.prerovsky
Hi there,
I started messing around with JavaScript OOP a few days ago and still
can't get this one to work. There are many things wich keep confusing
me, eg. the various ways to define a class or especially methods.
Ok, here's the code I'm trying to get to work. I'm trying to create a
selection mask with drag handles, which will enable the user to select
an area of an image. currently I'm stuck with
"el.addEventListener('mousedown', this.startDrag, false);" which leads
to "uncaught exception null" since this.startDrag seems not to be
recognized as a method for "this". Before this attempt I defined
functions like: "function startDrag()" which did not work fine, sind
"this" lead to the HTML element which has been clicked.
So, any ideas why this one does not work and leads to "uncaught
exception null"?
function Handle(id, maskRef) {
var el, drag;
this.id = id;
this.mask = maskRef;
el = document.createElement("div");
el.style.border = "1px solid #333333";
el.style.position = "absolute";
el.style.zIndex = "110";
el.style.width = "5px";
el.style.height = "5px";
el.style.left = "300px";
document.body.appendChild(el);
el.addEventListener('mousedown', this.startDrag, false);
el.addEventListener('mouseup', this.stopDrag, false);
document.addEventListener('mousemove', this.doDrag, false);
this.startDrag = function(event) {
drag = true;
alert(m.getInitX());
}
this.doDrag = function(event) {
if (!drag) return;
var posX = event.clientX + window.scrollX;
var posY = event.clientY + window.scrollY;
el.style.left = posX - 3 + "px";
el.style.top = posY - 3 + "px";
// update mask
var mask = document.getElementById("mask");
if (posX > this.mask.initX) {
mask.style.width = this.mask.initX - posX;
} else {
mask.style.width = mask.offsetLeft + mask.offsetWidth - posX;
mask.style.left = posX;
}
mask.style.height = (event.clientY + window.scrollY) -
mask.offsetTop - 1;
}
this.stopDrag = function(event) {
drag = false;
}
}
function Mask() {
el = document.createElement("div");
el.style.border = "1px dotted #333333";
el.style.position = "absolute";
el.style.zIndex = "100";
el.style.width = "300px";
el.style.height = "300px";
el.style.left = "400px";
el.style.top = "400px";
el.id = "mask";
document.body.appendChild(el);
var initX = el.offsetLeft;
var initY = el.offsetTop;
// create handles
var hSE = new Handle("se", this);
}
var m = new Mask();
Thanks in advance for any hints or suggestions!
Best regards,
Clemens
I started messing around with JavaScript OOP a few days ago and still
can't get this one to work. There are many things wich keep confusing
me, eg. the various ways to define a class or especially methods.
Ok, here's the code I'm trying to get to work. I'm trying to create a
selection mask with drag handles, which will enable the user to select
an area of an image. currently I'm stuck with
"el.addEventListener('mousedown', this.startDrag, false);" which leads
to "uncaught exception null" since this.startDrag seems not to be
recognized as a method for "this". Before this attempt I defined
functions like: "function startDrag()" which did not work fine, sind
"this" lead to the HTML element which has been clicked.
So, any ideas why this one does not work and leads to "uncaught
exception null"?
function Handle(id, maskRef) {
var el, drag;
this.id = id;
this.mask = maskRef;
el = document.createElement("div");
el.style.border = "1px solid #333333";
el.style.position = "absolute";
el.style.zIndex = "110";
el.style.width = "5px";
el.style.height = "5px";
el.style.left = "300px";
document.body.appendChild(el);
el.addEventListener('mousedown', this.startDrag, false);
el.addEventListener('mouseup', this.stopDrag, false);
document.addEventListener('mousemove', this.doDrag, false);
this.startDrag = function(event) {
drag = true;
alert(m.getInitX());
}
this.doDrag = function(event) {
if (!drag) return;
var posX = event.clientX + window.scrollX;
var posY = event.clientY + window.scrollY;
el.style.left = posX - 3 + "px";
el.style.top = posY - 3 + "px";
// update mask
var mask = document.getElementById("mask");
if (posX > this.mask.initX) {
mask.style.width = this.mask.initX - posX;
} else {
mask.style.width = mask.offsetLeft + mask.offsetWidth - posX;
mask.style.left = posX;
}
mask.style.height = (event.clientY + window.scrollY) -
mask.offsetTop - 1;
}
this.stopDrag = function(event) {
drag = false;
}
}
function Mask() {
el = document.createElement("div");
el.style.border = "1px dotted #333333";
el.style.position = "absolute";
el.style.zIndex = "100";
el.style.width = "300px";
el.style.height = "300px";
el.style.left = "400px";
el.style.top = "400px";
el.id = "mask";
document.body.appendChild(el);
var initX = el.offsetLeft;
var initY = el.offsetTop;
// create handles
var hSE = new Handle("se", this);
}
var m = new Mask();
Thanks in advance for any hints or suggestions!
Best regards,
Clemens