<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script> <div id="move"> </div> <style type="text/css"> #move { background: blue; cursor:move; cursor: -moz-grabbing; position: absolute; width: 54px; height: 45px; } </style> <script type="text/javascript"> $(function(){ var x = 0, y = 0, drag = 0; element = $('#move'); element.mousedown(function(event){ x = event.clientX-parseInt(element.css('left')); y = event.clientY-parseInt(element.css('top')); drag = true; }); $(document).mousemove(function(event){ if(drag){ element.css({'left' : event.clientX-x + "px", 'top' : event.clientY-y + "px"}); } }); $(document).mouseup(function(){ drag = false; }); }); </script>