JavaScript Draggable (no jQuery)

Well, the thing is, I hate jQuery. Not that I hate the language syntax or the way it does things. But, as a Javascript programmer, I feel that jQuery is stuff for beginners, and not even beginners, for people who want stuff to be done fast and without much effort (or knowledge). People who want to excel in web development should learn to code their own JS, without relying on jQuery, or, for that matter, any JavaScript library. Using libraries ruins your possibility of being able to code good JS. You learn to do things when you do everything yourself. For me, coding my own core JS gives me much more satisfaction than using some library. Well, I shouldn’t make this post too long. Let’s get to the matter. I’ll post about why I hate jQuery some time later.

The program uses concepts like Mouse Positioning, onmouseover and simple style rules like top and left. I called it TZDragg (Yeah!).

The first thing we need to do is make a div that is positioned absolute (so that we can set the top and left rules). Some additional rules are also applied so that it is convenient to use. Here we do it -

<style>
 #elem{
 position: absolute;
 width: 100px;
 height: 100px;
 background-color: black;
 -webkit-user-select: none;
 -moz-user-select: none;
 -o-user-select: none;
 -ms-user-select: none;
 -khtml-user-select: none;     
 user-select: none;
 cursor: default;
 }
</style>

Now that we have the div, let’s code the JS.

<script>
 // Coded by TheZillion [thezillion.wordpress.com]
 function $(el){
 return document.getElementById(el); // To make the code simpler by shortening document.getElementById - [http://bit.ly/QS3wE8]
 }
 var tzdragg = function(){ // To make the code cooler. TZDragg. Cool name!
 return {
 // Here we start of with the main functions
 startMoving : function(evt){ // The function that sets up the div coordinates to make it move. Executed on the onmousedown event on the div.
 evt = evt || window.event;
 var posX = evt.clientX, // The x-coordinate of the mouse pointer position on the screen
 posY = evt.clientY, // The y-coordinate of the mouse pointer position on the screen
 a = $('elem'), // Points to the div element
 divTop = a.style.top, // We need the initial position of the div so that we can determine its final position on dragging
 divLeft = a.style.left; // We need the initial position of the div so that we can determine its final position on dragging
 divTop = divTop.replace('px',''); // Just so that we can perform calculations on the variable.
 divLeft = divLeft.replace('px',''); // Just so that we can perform calculations on the variable.
 var diffX = posX - divLeft, // We keep this value so that we can calculate the final position of the element
 diffY = posY - divTop; // We keep this value so that we can calculate the final position of the element
 document.onmousemove = function(evt){ // Whenever the mouse moves, this function is execulted
 evt = evt || window.event;
 var posX = evt.clientX, // Mouse x-coordinate
 posY = evt.clientY, // Mouse y-coordinate
 aX = posX - diffX, // The final x-coordinate of the element
 aY = posY - diffY; // The final y-coordinate of the element
 tzdragg.move('elem',aX,aY); // Function to assign the style rules to the element
 }
 },
 stopMoving : function(){ // This function gets executed when the user leaves the div alone. Changed the value of the onmousemove attribute.
 document.onmousemove = function(){}
 },
 move : function(divid,xpos,ypos){ // Function to assign the style rules to the element
 var a = $(divid);
 $(divid).style.left = xpos + 'px';
 $(divid).style.top = ypos + 'px';
 }
 }
 }();
 </script>

Then finally, the div element with its events -

<div id='elem' onmousedown='tzdragg.startMoving(event);' onmouseup='tzdragg.stopMoving();' style='top: 10px; left: 10px;' ></div>

Here’s a demo - jsfiddle.net/thezillion/Qx44z

Here’s the whole code -

<!doctype html>
<html>
 <head>
 <title>
 TZDragg
 </title>
 <style>
 #elem{
 position: absolute;
 width: 100px;
 height: 100px;
 background-color: black;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 -khtml-user-select: none;
 user-select: none;
 cursor: default;
 }
 </style>
 <script>
 // Coded by TheZillion [thezillion.wordpress.com]
 function $(el){
 return document.getElementById(el); // To make the code simpler by shortening document.getElementById - [http://bit.ly/QS3wE8]
 }
 var tzdragg = function(){ // To make the code cooler. TZDragg. Cool name!
 return {
 // Here we start of with the main functions
 startMoving : function(evt){ // The function that sets up the div coordinates to make it move. Executed on the onmousedown event on the div.
 evt = evt || window.event;
 var posX = evt.clientX, // The x-coordinate of the mouse pointer position on the screen
 posY = evt.clientY, // The y-coordinate of the mouse pointer position on the screen
 a = $('elem'), // Points to the div element
 divTop = a.style.top, // We need the initial position of the div so that we can determine its final position on dragging
 divLeft = a.style.left; // We need the initial position of the div so that we can determine its final position on dragging
 divTop = divTop.replace('px',''); // Just so that we can perform calculations on the variable.
 divLeft = divLeft.replace('px',''); // Just so that we can perform calculations on the variable.
 var diffX = posX - divLeft, // We keep this value so that we can calculate the final position of the element
 diffY = posY - divTop; // We keep this value so that we can calculate the final position of the element
 document.onmousemove = function(evt){ // Whenever the mouse moves, this function is execulted
 evt = evt || window.event;
 var posX = evt.clientX, // Mouse x-coordinate
 posY = evt.clientY, // Mouse y-coordinate
 aX = posX - diffX, // The final x-coordinate of the element
 aY = posY - diffY; // The final y-coordinate of the element
 tzdragg.move('elem',aX,aY); // Function to assign the style rules to the element
 }
 },
 stopMoving : function(){ // This function gets executed when the user leaves the div alone. Changed the value of the onmousemove attribute.
 document.onmousemove = function(){}
 },
 move : function(divid,xpos,ypos){ // Function to assign the style rules to the element
 var a = $(divid);
 $(divid).style.left = xpos + 'px';
 $(divid).style.top = ypos + 'px';
 }
 }
 }();
 </script>
 </head>
 <body>
 <div id='elem' onmousedown='tzdragg.startMoving(event);' onmouseup='tzdragg.stopMoving();' style='top: 10px; left: 10px;' ></div>
 </body>
</html>
About these ads

4 thoughts on “JavaScript Draggable (no jQuery)

  1. Pingback: Javascript Draggable 2 (no jQuery) | TheZillion

  2. hi thanks for this tutorial! keep up the spirit of pure programmer you having! I always look how shameful some people boasting they are using jQuery… but little do they know bunch of jQuery will slow their site down as well as make them dependent and lack of javascript knowledge..

  3. Yeah brother! At last, another coder who despises jQuery! You nailed it on the head — these libraries are breeding a generation of moron “developers.”

    And this tutorial is EXACTLY what I was looking for. Thanks very much!

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