Need help understanding some JS code.

Hello,
I'm working on a project in which I need to drag and drop an image
imbeded in a div frame {overflow: hidden}. I found this source code at
<http://www.youngpup.net/_projectDirectories/domdrag/dom-drag.js> which
I'm reading to figure out the subtlties of doing drag and drop with JS.
A simple implementation of this code is here:
<http://www.youngpup.net/_projectDirectories/domdrag/demos/ex2/index.html>
At this point I'm stuck on a one thing.

In the above source code (dom-drag.js) I generally understand what's
going on in the init() function, except the assignments on lines 36-38

36 o.root.onDragStart = new Function();
37 o.root.onDragEnd = new Function();
38 o.root.onDrag = new Function();

Why are these members being assigned empty functions? Later in the code
they are each called with coordinate pairs (x, y) as arguments.

In start() on line 47:
----------------------
47 o.root.onDragStart(x, y);

In drag() on line 101:
----------------------
101 Drag.obj.root.onDrag(nx, ny);

And in end() on line(s) 109, 110:
---------------------------------
109 Drag.obj.root.onDragEnd(parseInt(Drag.obj.root.sty le[Drag.obj.hmode
? "left" : "right"]),
110 parseInt(Drag.obj.root.style[Drag.obj.vmode ? "top" : "bottom"]));

As there are no function bodys (that I can see), what is the use of
this? What is being executed by these calls? I'm obviously missing
something here. I took the source and commented out these function
definitions and calls and it doesn't seem to affect the functionality of
the example above.

Thanks for your time and attention.

Regards,
N. Demos





--
Change "seven" to a digit to email me.

re: Need help understanding some JS code.

N. Demos wrote:[color=blue]
> Hello,
> I'm working on a project in which I need to drag and drop an image
> imbeded in a div frame {overflow: hidden}. I found this source code at
> <http://www.youngpup.net/_projectDirectories/domdrag/dom-drag.js> which
> I'm reading to figure out the subtlties of doing drag and drop with JS.
> A simple implementation of this code is here:
> <http://www.youngpup.net/_projectDirectories/domdrag/demos/ex2/index.html>
> At this point I'm stuck on a one thing.
>
> In the above source code (dom-drag.js) I generally understand what's
> going on in the init() function, except the assignments on lines 36-38
>
> 36 o.root.onDragStart = new Function();
> 37 o.root.onDragEnd = new Function();
> 38 o.root.onDrag = new Function();
>
> Why are these members being assigned empty functions? Later in the code
> they are each called with coordinate pairs (x, y) as arguments.
>
> In start() on line 47:
> ----------------------
> 47 o.root.onDragStart(x, y);
>
> In drag() on line 101:
> ----------------------
> 101 Drag.obj.root.onDrag(nx, ny);
>
> And in end() on line(s) 109, 110:
> ---------------------------------
> 109 Drag.obj.root.onDragEnd(parseInt(Drag.obj.root.sty le[Drag.obj.hmode
> ? "left" : "right"]),
> 110 parseInt(Drag.obj.root.style[Drag.obj.vmode ? "top" : "bottom"]));
>
> As there are no function bodys (that I can see), what is the use of
> this? What is being executed by these calls? I'm obviously missing
> something here. I took the source and commented out these function
> definitions and calls and it doesn't seem to affect the functionality of
> the example above.[/color]

They look like stubs to add code for those functions later, or the
bodies may have simply been removed for the sake of the demo. Perhaps
in their real code they have a cross-browser way of adding those events,
you can't tell from the demo.


--
Rob

re: Need help understanding some JS code.

RobG wrote:[color=blue]
> N. Demos wrote:
>[color=green]
>> Hello,
>> I'm working on a project in which I need to drag and drop an image
>> imbeded in a div frame {overflow: hidden}. I found this source code at
>> <http://www.youngpup.net/_projectDirectories/domdrag/dom-drag.js> which
>> I'm reading to figure out the subtlties of doing drag and drop with
>> JS. A simple implementation of this code is here:
>> <http://www.youngpup.net/_projectDirectories/domdrag/demos/ex2/index.html>
>>
>> At this point I'm stuck on a one thing.
>>
>> In the above source code (dom-drag.js) I generally understand what's
>> going on in the init() function, except the assignments on lines 36-38
>>
>> 36 o.root.onDragStart = new Function();
>> 37 o.root.onDragEnd = new Function();
>> 38 o.root.onDrag = new Function();
>>
>> Why are these members being assigned empty functions? Later in the code
>> they are each called with coordinate pairs (x, y) as arguments.
>>
>> In start() on line 47:
>> ----------------------
>> 47 o.root.onDragStart(x, y);
>>
>> In drag() on line 101:
>> ----------------------
>> 101 Drag.obj.root.onDrag(nx, ny);
>>
>> And in end() on line(s) 109, 110:
>> ---------------------------------
>> 109 Drag.obj.root.onDragEnd(parseInt(Drag.obj.root.sty le[Drag.obj.hmode
>> ? "left" : "right"]),
>> 110 parseInt(Drag.obj.root.style[Drag.obj.vmode ? "top" : "bottom"]));
>>
>> As there are no function bodys (that I can see), what is the use of
>> this? What is being executed by these calls? I'm obviously missing
>> something here. I took the source and commented out these function
>> definitions and calls and it doesn't seem to affect the functionality
>> of the example above.[/color]
>
>
> They look like stubs to add code for those functions later, or the
> bodies may have simply been removed for the sake of the demo. Perhaps
> in their real code they have a cross-browser way of adding those events,
> you can't tell from the demo.
>
>[/color]
RobG,
After I tested the code with those lines commented out, I kind of
thought that it was leftover code from a previous version or something
similar. Thanks for your reply.

Regards,
N. Demos

--
Change "seven" to a digit to email me.

re: Need help understanding some JS code.

N. Demos wrote:[color=blue]
> In the above source code (dom-drag.js) I generally understand what's
> going on in the init() function, except the assignments on lines 36-38
>
> 36 o.root.onDragStart = new Function();
> 37 o.root.onDragEnd = new Function();
> 38 o.root.onDrag = new Function();[/color]

Dragging an object around the screen became a beloved scripting puzzle
since 4th versions of IE/NN. Ever since there are thousands of
thousands dragging scripts written, but only very few of them are
anyhow good.

Microsoft first decided to help to automate such frequent task. In
Internet Explorer almost any element listens for "dragstart", "dragend"
and "drag" events. As the author of the posted code decided to do
everything in its way, he also decided to "kill" the default IE's event
handlers intended for dragging.

By doing:
o.root.onDragStart = new Function();
the author thinks that he's killing the default obj.ondragstart event
handler by setting it to a bogus anonymous function. This effectively
doesn't work, because in-code event handlers are case sensitive (unlike
intrinsic handlers) and must be all in lower case:
o.root.ondragstart
o.root.ondragend
o.root.ondrag
So the posted code lines simply add new useless function onDragStart,
onDragEnd and onDrag to the object.

I guess that the author felt that something was not as expected, so he
was checking these functions later like:
o.root.onDragStart(x,y)
and this leftover of the debugging code has been left in the script.

Hope that it helps...