Need help understanding some JS code.

Discussion in 'Javascript' started by N. Demos, Nov 20, 2005.

  1. N. Demos

    N. Demos Guest

    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.style[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.
    N. Demos, Nov 20, 2005
    #1
    1. Advertising

  2. N. Demos

    RobG Guest

    N. Demos wrote:
    > 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.style[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.


    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
    RobG, Nov 21, 2005
    #2
    1. Advertising

  3. N. Demos

    N. Demos Guest

    RobG wrote:
    > N. Demos wrote:
    >
    >> 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.style[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.

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

    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.
    N. Demos, Nov 21, 2005
    #3
  4. N. Demos

    VK Guest

    N. Demos wrote:
    > 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();


    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...
    VK, Nov 21, 2005
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Replies:
    2
    Views:
    404
    Phlip
    Mar 15, 2007
  2. Need help in understanding c code

    , Jun 1, 2007, in forum: C Programming
    Replies:
    2
    Views:
    302
    Barry Schwarz
    Jun 2, 2007
  3. Daniel
    Replies:
    8
    Views:
    425
    Daniel
    Sep 13, 2007
  4. jake

    Help understanding some C code

    jake, Oct 30, 2009, in forum: C Programming
    Replies:
    12
    Views:
    807
    Chris M. Thomasson
    Nov 1, 2009
  5. Thomas Foster

    I need help understanding some code..

    Thomas Foster, Mar 5, 2014, in forum: Ruby
    Replies:
    3
    Views:
    141
    Robert Klemme
    Mar 7, 2014
Loading...

Share This Page