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.

    <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;
    <style type="text/css">
        background-color: #797979;
        color: #fff;
        width: 300px;
        cursor: move;
        position: relative;
        padding: 10px;
  <body onload="move_init()">
    <div id="ele" style="left:50px;top:60px;z-index: 5;" onmousedown="_move_item(this);" >
      <h3>My draggable element</h3>

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

Share this post: