Hi folks,
I’m trying to figure out this Javascript drag-and-drop code, 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:
[FONT=Courier New][LEFT][COLOR=#000000]var[/COLOR] ie = document.[COLOR=#000080]all[/COLOR];
[COLOR=#000000]var[/COLOR] nn6 = document.[COLOR=#000080]getElementById[/COLOR] &&! document.[COLOR=#000080]all[/COLOR];
[COLOR=#000000]var[/COLOR] isdrag=[COLOR=#000000]false[/COLOR];
[COLOR=#000000]var[/COLOR] x,y;
[COLOR=#000000]var[/COLOR] dobj;
[COLOR=#000000]function[/COLOR] movemouseCOLOR=#000000[/COLOR] [COLOR=#000000]{[/COLOR]
[COLOR=#0000ff]if[/COLOR] COLOR=#000000[/COLOR] [COLOR=#000000]{[/COLOR]
dobj.[COLOR=#000080]style[/COLOR].[COLOR=#000080]top[/COLOR] = nn6 ? ty + [COLOR=#0000ff]e[/COLOR].[COLOR=#000080]clientY[/COLOR] - y : ty + event.[COLOR=#000080]clientY[/COLOR] - y;
[COLOR=#0000ff]return[/COLOR] [COLOR=#000000]false[/COLOR];
[COLOR=#000000]}[/COLOR]
[COLOR=#000000]}[/COLOR]
[COLOR=#000000]function[/COLOR] selectmouseCOLOR=#000000[/COLOR] [COLOR=#000000]{[/COLOR]
[COLOR=#000000]var[/COLOR] fobj = nn6 ? [COLOR=#0000ff]e[/COLOR].[COLOR=#0000ff]target[/COLOR] : event.[COLOR=#000080]srcElement[/COLOR];
[COLOR=#000000]var[/COLOR] topelement = nn6 ? [COLOR=#ff0000]“HTML”[/COLOR] : [COLOR=#ff0000]“BODY”[/COLOR];
[COLOR=#0000ff]while[/COLOR] [COLOR=#000000]([/COLOR]fobj.[COLOR=#000080]tagName[/COLOR] != topelement && fobj.[COLOR=#000080]className[/COLOR] != [COLOR=#ff0000]“dragme”[/COLOR][COLOR=#000000])[/COLOR] [COLOR=#000000]{[/COLOR]
fobj = nn6 ? fobj.[COLOR=#0000ff]parentNode[/COLOR] : fobj.[COLOR=#000080]parentElement[/COLOR];
[COLOR=#000000]}[/COLOR]
[COLOR=#0000ff]if[/COLOR] COLOR=#000000[/COLOR] [COLOR=#000000]{[/COLOR]
isdrag = [COLOR=#000000]true[/COLOR];
dobj = fobj;
ty = [COLOR=#0000ff]parseInt[/COLOR]COLOR=#000000[/COLOR];
y = nn6 ? [COLOR=#0000ff]e[/COLOR].[COLOR=#000080]clientY[/COLOR] : event.[COLOR=#000080]clientY[/COLOR];
document.[COLOR=#0000ff]onmousemove[/COLOR]=movemouse;
[COLOR=#0000ff]return[/COLOR] [COLOR=#000000]false[/COLOR];
[COLOR=#000000]}[/COLOR]
[COLOR=#000000]}[/COLOR]
document.[COLOR=#0000ff]onmousedown[/COLOR]=selectmouse;
document.[COLOR=#0000ff]onmouseup[/COLOR]=[COLOR=#000000]new[/COLOR] [COLOR=#000000]Function[/COLOR]COLOR=#000000[/COLOR];
[/LEFT]
[/FONT]
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.
