Hey fellas,
Today I am going to show you how you can make an element draggable or moveable on your webpage. This webpage element can be either image, div or even input box. We are going to use simple Javascript, CSS and HTML for this purpose. You can see a working demo on this page and can save the file from there or just copy paste the code from below.
<html>
<head>
<title>Simple Drag</title>
<script type="text/javascript">
//object of the element to be moved
_item = null;
//stores x & y co-ordinates of the mouse pointer
mouse_x = 0;
mouse_y = 0;
// stores top,left values (edge) of the element
ele_x = 0;
ele_y = 0;
//bind the functions
function move_init()
{
document.onmousemove = _move;
document.onmouseup = _stop;
}
//destroy the object when we are done
function _stop()
{
_item = null;
}
//main functions which is responsible for moving the element (div in our example)
function _move(e)
{
mouse_x = document.all ? window.event.clientX : e.pageX;
mouse_y = document.all ? window.event.clientY : e.pageY;
if(_item != null)
{
_item.style.left = (mouse_x - ele_x) + "px";
_item.style.top = (mouse_y - ele_y) + "px";
}
}
//will be called when use starts dragging an element
function _move_item(ele)
{
//store the object of the element which needs to be moved
_item = ele;
ele_x = mouse_x - _item.offsetLeft;
ele_y = mouse_y - _item.offsetTop;
}
</script>
<style type="text/css">
#ele{
background-color: #797979;
color: #fff;
width: 300px;
height:100px;
cursor: move;
position: relative;
padding: 10px;
}
</style>
</head>
<body onload="move_init()">
<div id="ele" style="left:50px;top:60px;z-index: 5;" onmousedown="_move_item(this);" >
<h3>My draggable element</h3>
</div>
</body>
</html> |
Albeit, the above code is self explanatory, due to the presence of inline comments, but still for the depth view, here is a small description of the above code.
As soon as the body loads (onload event) a Javascript function called move_init() which binds the functions _move and _stop on events onmousemove and onmouseup respectively. When the element is not clicked for dragging the _move keeps updating the position of the mouse pointer in the variables mouse_x and mouse_y. Now when the user clicks the element which he wants to drag the function _move_item() is called which updates the _item variable with current elements object, from which we can easily grab the offset positions of the element.
Now that we have the offset position of the element and mouse positions, we simply need to change the position of the element using the CSS property of the element. Make sure the styles are defined inline and the position of the element should be relative, otherwise the script will not work.
If you have any questions/comments, you can holla back by leaving a comment below.
Hope that helps.
Stay Digified !!
Sachin Khosla
