moveMe v1.1 Mack Pexton June 26, 2004

Examples

This is a box that you can grab with the mouse and move elsewhere on the page.
Title
This is a box that you can move by grabbing the title bar.

Introduction

MoveMe is a collection of three small JavaScript routines that allow the user to move things around your web page by clicking on it and dragging it to a new position. MoveMe works with almost all browsers (not NS4).

The moveMe routines are intended to be connected to a document element's onmousedown, onmouseup, and onmousemove attributes like this:

<div style="position:absolute;"
 onmousedown="moveMe.start(event,this)"
 onmouseup="moveMe.stop()"
 onmousemove="moveMe(event,this)"
 onmouseover="this.style.cursor='move'"
 onmouseout="this.style.cursor='auto'"
>This is a box that you can grab with the mouse and move elsewhere on the page.</div>

Note that the element being moved must have the CSS style position:absolute;.

To put a title bar on the box or a "hot-spot" on the element to be moved, identify the element that is to be moved in the calls to moveMe(). The example above looks like:

<div class="box">
<div class="title-bar"
 onmousedown="moveMe.start(event,this.parentNode)"
 onmouseup="moveMe.stop()"
 onmousemove="moveMe(event,this.parentNode)"
 onmouseover="this.style.cursor='move'"
 onmouseout="this.style.cursor='auto'"
>Title</div>
This is a box that you can move by grabbing the title bar.
</div>

Instead of calling moveMe() with the this argument, we use this.parentNode which refers to the enclosing box that is to be moved.

Download

A zip file of this document and the the moveMe JavaScript code can be downloaded here: moveMe.zip

Top