This is just a simple script that makes any HTML element draggable, even this message.

Try it with these other images too.

Generic Dragging Script - With Snap-to Feature

Easy to integrate, cross-browser script enabling mouse dragging functionality for many HTML elements. Now, you can activate a "snap-to" feature which will snap the elements to an invisible grid.

The snapto grid spacing is controlled by a variable in the js file called dO.snapthresh, which is currently set to 20, but can be set to any value you want.

Currently, snapto is enable, but you can disable it by using a link (which calls a function) to toggle snapto mode.

Click this link to toggle snapto mode.

The variable that enables or disables this mode is called dO.snapto In the js file, set this value to true to have snapto enabled by default, false to disable it by default.

Directions

Step 1: First, copy and paste the following script in the HEAD section of your page:
Select all...

Step 2: Next, for each element you want to make draggable, you'll need to wrap the element (such as an image) with a DIV tag and give it a unique id.
Example:

<div id="i1" style="position:absolute; top:60px; left:30px; width:366px; height:80px;">
<img src="logo.jpg" width="366" height="80">
</div>

Step 3: Copy and paste the following script tag in the BODY section of your page:
Note that the example below shows the script I used to make my draggable elements above, yours will be different depending on how many elements you want to make draggable and the ID value you assign to your DIVs.
Select all...

A couple of notes:

Make certain all the elements you want to make draggable appear in the HTML page before the script in step 3, otherwise you will get errors. So, just create all your HTML elements, and then put the script from step 3 in after.
Don't forget to upload the "drag.js" file to your server.