This script only works in browsers supporting DOM Level 1 and DOM Level 2. This means that Internet Explorer 6.0 for Windows does not work.

Setting up the Page

To use the generic move script you need to include one JavaScript file called domgenmove.js.

<script type="text/javascript" src="domgenmove.js"></script>

Now that the file is included any element in the page can potentially become movable. To make an element movable the position style needs to have one of the following three values: absolute, relative or fixed.

Once that is done we also need to change the class name of the element so that the script can make the desired elements movable. This can be done in two ways. Either set the class name to moveme or set the class name to handle. If you use handle then a second custom attribute called handlefor is needed and this points at the element that should be moved when the handle is dragged.

<p class="moveme">Movable</p>

<div id="my-element">
   <div class="handle" handlefor="my-element">Handle</div>
   More...
</div>

Demo

This is a div that you can grab anywhere. This div has the class="moveme"

It has the position style set to relative without any top or left values.

This is the handle

This is a div that's moved with a handle. The title has the class="handle title" and the custom attribute handlefor that has the value of the id that it should move

It has the position style set to relative.

This is a movable table. The shadow is made using semi-transparent PNG images that are placed in the right and bottom cells.
Moving Towards 1.0 9 May 2002
Mozilla 1.0 Release Candidate 2 has been released. It contains many fixes for crashes and other problems found in RC1. Please download RC2 and help us verify our fixes.
This div has position fixed. Try scrolling the page.

DOM Generic Move
Usage and Demo
Download

Author: Erik Arvidsson