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 - http://thezillion.tk/code/tzdragg/tzdragg.js

Update : Here is a demo fiddle for the implementation - http://jsfiddle.net/thezillion/79dmA/

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

9 thoughts on “Javascript Draggable 2 (no jQuery)”

Magnificent website. Lots of helpful info here. I am sending it to several friends ans additionally sharing in delicious. And certainly, thanks on your effort!

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

thezillion says:

November 3, 2012 at 8:31 am

Hi Jordan.
I’ve made a Fiddle for you to understand the code implementation – http://jsfiddle.net/thezillion/79dmA/

- Prince

Reply
- Jordan says:
  
  November 3, 2012 at 2:02 pm
  
  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.
- thezillion says:
  
  November 7, 2012 at 5:27 pm
  
  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!
  
  Prince
- Yi Liu says:
  
  November 7, 2012 at 5:53 pm
  
  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?
  
  Thanks
  
  Jordan
- thezillion says:
  
  December 13, 2012 at 4:36 pm
  
  Well, yes. You can do that with Javascript dataTransfer.