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 – thezillion.wordpress.com/2012/08/29/javascript-draggable-no-jquery

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 – https://raw.github.com/thezillion/tzdragg/master/source/tzdragg.js

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.

About these ads

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

    Thanks,

    Jordan

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s