PDA

View Full Version : Javascript drag-and-drop



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.