Inside Technique : WebFX DHTML Demos : Generic Drag-Drop

This is one of my first scripts and is used in most of the WebFX articles. It is really easy to use! There are two steps to adding this functionality to your page:

1. First add the genMove.js javascript file to your page:

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

2. Second, set the class any positioned element to "moveme". Your DIV must be set to either position: absolute or position: relative.

This adds drag and drop to the positioned element. With a little more work, you can define a handle for moving the element (useful for creating draggable title bars). To create a handle, you set the class equal to "handle" and add a custom attribute, "for" specifying the ID of the element representing the element to drag. For example:

<div id="testDiv">
<div class="handle" handlefor="testDiv" id="title">This is the handle</div>
<div id="inner">
<p>This is a <DIV> that's moved with a handle
<p>The title has the <code>class="handle"</code> and the custom attribute <code>for</code> that
has the value of the id that it should move
</div>
</div>

On this page, you will find two demonstrations that you can drag.

Internet Explorer 4.0 required for the demonstration

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.