# Javascript drag-and-drop

**URL:** <https://forum.kirupa.com/t/javascript-drag-and-drop/197184>\
**Category:** web dev\
**Created:** [August 14, 2006, 3:44pm UTC](https://forum.kirupa.com/t/javascript-drag-and-drop/197184 "2006-08-14T15:44:26Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![takethetrain](https://avatars.discourse-cdn.com/v4/letter/t/ba8739/32.png) [@takethetrain](https://forum.kirupa.com/u/takethetrain)\
**Post date:** [August 14, 2006, 3:44pm UTC](https://forum.kirupa.com/t/javascript-drag-and-drop/197184/1 "2006-08-14T15:44:26Z")

</div>

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:

[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.