What does this script do?

This script allows movement of webpage elements to any position on the page by clicking on an element and dragging it to another position.

How do I use it?

At first you have to include the javascript file on the page you want to use it on. This can be done using the following HTML snipplet:
<script type="text/javascript" src="drag_element.js">
</script>
Then you have to add an onmousedown event handler to an element to start the movement process. You can directly submit an object as parameter.
<div onmousedown="return lers_startMove(this)">
…
</div>
Or you can also use an element ID as parameter if you want to move another element than the one you are clicking on.
<h1 onmousedown="return lers_startMove('menu')">
…
</h1>

Notes

Demo
Download script file

Version History

v1.1

• removed restriction that element must be positioned absolute
• prefixed functions and global variables to reduce chance of name collisions with other scripts
• added another CSS class while mouse is clicked on the element to move so that other styles (e.g. a different cursor) can be set

v1.0

• first public release