script.aculo.us

Note: This code has been written with WordPress 2.8 in mind. It won't work on versions prior to 2.6 and might have unpredictable results in later versions.

Drag and drop is a useful mechanism to do stuff and can turn a complicated set of buttons or drop down lists into a simple elegant solution.

Wordpress has lots of scripts built in, which do a lot of useful functions. However, they are not enabled by default, which means that in order to get your script to work you need to enable them.

The drag and drop functionality in Wordpress is provided by the Scriptaculous framework. To get Wordpress to include this in your page header just use the function wp_enqueue_script() with the parameter "scriptaculous-dragdrop".

Creating a new Draggable object with the script.aculo.us framework is easy. You just create a new instance of the Draggable object with the element id to be made draggable as the first parameter and a set of options as the second.

<div id="dragMe"></div>
<script type="text/javascript">
new Draggable('dragMe',{revert:true});
</script>

The revert option will make the draggable element move back to the position it started from. More options can be added by separating them by commas, so to enable ghosting on the element as well as revert use the following.

new Draggable('dragMe',{revert:true,ghosting:true});

Ghosting means that when the element is dragged a ghost copy of the element moves with the mouse, where the original stays where it is until the mouse is released.