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 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 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.