Prince Mathew's web log. [ function define(code){return life;} ]

Main menu

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 –

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

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

4 thoughts on “JavaScript Draggable (no jQuery)”

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

Here is a method for browser recognition using simple Javascript. We will be using the navigator object, get the browser details and perform a browser name check. This can help when you need to perform browser-specific styling. Firstly, a function – function checkBrowser(){ } The function will return the browser name when executed. var myNav … Continue read […]

Exams over, I got quite some free time yesterday, and started coding some custom tooltip functionality and ended up making something that could make hovermenus, tooltips, descriptions, (and whatever you wanna use it for) much easier. The code was great fun and I was quite jubilant after completing it. I called it Desco. I can’t … Continue reading →

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 so […]

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 … Continue reading →

You must be really fed up when you need to use document.getElementById() again and again in your JS code. jQuery provides a good variant by letting you use $(el). But, if you don’t wanna use jQuery, here is a method you can use to ease out you code by simplifying document.getElementById(), document.getElementsByName(), document.getElementsByTagName() or docu […]

It’s been long since I have blogged. I played with a lot of code this summer. While most of my works are on the go to becoming startups, I also did some passtime code work. Here is a list of the ones that interested me the most – 1. Shrink – It is a lite URL … Continue reading →

Last week, I encountered a need to be able to show search results based on a list on the web page, and I developed the following code to achieve it. First of all I had a list with id “bever” – Coffee Tea Milk The following is the JavaScript : function search(q,e){ … Continue reading →

Well, I was kind of out-of-subject, so I thought of blogging on a simple, damn simple JavaScript program which shows up a typing effect. After coding it, I just looked up some other methods of doing it. But, all of them took more than twenty lines of code. Mine takes up a measly 6-10 lines of code. … Continue reading →

Facebook’s picture viewer got a new makeover yet again, with a striking back look (black was prevalent in the last-to-last picture viewer too). The comments section was shifted to the right along with the ads. The Good : It has become sleeker, loads faster and has brought the comments section to the top, just … Continue reading →