Javascript Draggable 2 (no jQuery)

I posted some time ago about a core JS implementation of draggable functionality.

My first post on JS draggable can be found here –

There, I made a div draggable by using some JS and appropriate CSS. And yeah, I named it TZDragg. The valuable feedbacks from users made me better the code to some extent, and make it more usable.

Firstly, I’ll talk about the functionality I added to TZDragg..

Many people told me that they they could not use the code with elements that were not positioned as absolute and whose co-ordinates were not preset. Eg. – if people want to make the list items enclosed in a <ul> tag draggable, they will have to set each list item positioned absolute and set its co-ordinates which is a very untidy way of doing it. So, I coded a function named is_element_having_set_coordinates(). It first checks if the desired element is positioned absolute. Then, it sets the top and left positions of the element according to its browser co-ordinates. This function is executed on the onmousedown event, enclose in the tzdragg.startMoving() function. This makes tzdragg highly useful.. Now, you can drag lists, divs around without ever setting the style attribute rules.

Many people also complained that, for the execution of the draggable functionality requires a lot of code-writing. Also, including the onmousedown and onmouseup events in the HTML has become a very n00by way. I coded a function that helps the users to implement the code simply in the following way –

In the <head> section, create a <script> tag, and code the following lines in it –

win.onload = function(){
 tzdragg.drag('elem1, elem2, ..... elemn');
 // ^ IDs of the draggable elements separated by a comma.

That’s quit simple.. Oh, and yes, I uploaded the JS file here –

You can embed the JS file in your webpage using the <script> tag.. I hope it works well. Please send me your feedbacks, preferably here.


13 thoughts on “Javascript Draggable 2 (no jQuery)

  1. Hi, Prince,

    I am new , and learning java script. I don’t know how to call you new fuction.
    Could you please offer an whole html for your Javascript Draggable 2 (no jQuery), like your first post.



      1. Prince, so easy and so good!
        Is that possible group darg and drop with CTRL-press?
        I like your original code which are very helpful for novices to understand javascript. Thank you for your quick reply.

      2. That is possible with a few more lines of code in the source code. I will add it as a customization and tell about it in my new post.
        Thanks for the suggestion, Jordan!


      3. Hi, thezillion,

        At the same time, if you can figure out:

        How to put them in a container, and we can drag-and-drop from and to containers?



  2. Do you think it’s possible to change your code so that the draggable div can be contained inside another div? Something like google map’s way of doing it?
    If so, any clues on how to start?
    Thanks =]

    1. Hey! This is a pretty old library I wrote. xD
      Well, what about applying constraints to the element coordinates in the startMoving() function so that its x and y coordinates are contained within the parent element’s four points?

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s