takethetrain
August 14th, 2006, 11:44 AM
Hi folks,
I'm trying to figure out this Javascript drag-and-drop code (http://elouai.com/javascript-drag-and-drop.php), and while I generally know what's going on, I can't edit it because I don't know the syntax well enough. I have modified it to a point where it only scrolls on the Y axis, but I'd like to constrain how far it can be dragged (kinda like startDrag in ActionScript). Here is the script so far:
var ie = document.all;
var nn6 = document.getElementById &&! document.all;
var isdrag=false;
var x,y;
var dobj;
function movemouse(e) {
if (isdrag) {
dobj.style.top = nn6 ? ty + e.clientY - y : ty + event.clientY - y;
return false;
}
}
function selectmouse(e) {
var fobj = nn6 ? e.target : event.srcElement;
var topelement = nn6 ? "HTML" : "BODY";
while (fobj.tagName != topelement && fobj.className != "dragme") {
fobj = nn6 ? fobj.parentNode : fobj.parentElement;
}
if (fobj.className=="dragme") {
isdrag = true;
dobj = fobj;
ty = parseInt(dobj.style.top+0);
y = nn6 ? e.clientY : event.clientY;
document.onmousemove=movemouse;
return false;
}
}
document.onmousedown=selectmouse;
document.onmouseup=new Function("isdrag=false");
If anyone could please explain what's going on here, piece by piece, it would be extremely helpful. Links to existing tutorials would be helpful, too.
I'm trying to figure out this Javascript drag-and-drop code (http://elouai.com/javascript-drag-and-drop.php), and while I generally know what's going on, I can't edit it because I don't know the syntax well enough. I have modified it to a point where it only scrolls on the Y axis, but I'd like to constrain how far it can be dragged (kinda like startDrag in ActionScript). Here is the script so far:
var ie = document.all;
var nn6 = document.getElementById &&! document.all;
var isdrag=false;
var x,y;
var dobj;
function movemouse(e) {
if (isdrag) {
dobj.style.top = nn6 ? ty + e.clientY - y : ty + event.clientY - y;
return false;
}
}
function selectmouse(e) {
var fobj = nn6 ? e.target : event.srcElement;
var topelement = nn6 ? "HTML" : "BODY";
while (fobj.tagName != topelement && fobj.className != "dragme") {
fobj = nn6 ? fobj.parentNode : fobj.parentElement;
}
if (fobj.className=="dragme") {
isdrag = true;
dobj = fobj;
ty = parseInt(dobj.style.top+0);
y = nn6 ? e.clientY : event.clientY;
document.onmousemove=movemouse;
return false;
}
}
document.onmousedown=selectmouse;
document.onmouseup=new Function("isdrag=false");
If anyone could please explain what's going on here, piece by piece, it would be extremely helpful. Links to existing tutorials would be helpful, too.