HTML can be moved around on a page with a click-and-hold while moving the mouse.
MooTools has two libraries: Core and More. The Core contains code that is always used for every MooTools application and is found at http://mootools.net/core. There are many goodies that are oldie or otherwise in the MooTools More library: http://mootools.net/more.
In a previous recipe we profiled the sizes of different MooTools versions. There are different versions of MooTools More; nevertheless, we will be profiling only different selections for download of the 1.3.0 MooTools More library:
mootools_core-more-1.3.0.js 328K
mootools_core-more-1.3.0c.js 224K
mootools_core-more-nolocale-1.3.0.js 217K
mootools_core-more-nolocale-1.3.0c.js 137K
In the actual oldies, when 14.4K dial-up connections rocked our Mozilla Netscape worlds, 137K was enough of a boat anchor to cause a visitor to leave and never return. Fortunately, in this day of 500K skip-this-preview splash pages, if we are truly providing a fresh user interface, we may be forgiven for an extra 137K of library. Still, it is to everyone's benefit to selectively choose, from the MooTools More download page, only the More classes needed once a site goes into production.
In development, though, our scope may change rapidly, so let us get the whole shebang. One consideration we might make for development, to reduce our own code-refresh loop time, is to not include the Locale functions. Shown earlier are the compressed ("c.js") and non-compressed versions of the full More and the More minus the Locale functions.
<!-- we have to have the core, always -->
<script type="text/javascript" src="mootools-1.3.0.js"></script>
<!-- we need the more, with the core! -->
<script type="text/javascript" src="mootools-more-nolocale- 1.3.0.js"></script>
</head>
<body>
<div id="my_trigger" style="width:100px; height:100px; border:1px solid #BEBEBE; line-height:50px; text-align:center;">Drag Me</div>
<script type="text/javascript">
// show how easy it is to make a dragging object
var movin_object = new Drag.Move('my_trigger');
</script>
Defining a Drag object is as simple as passing an element ID to the method Drag.move(). That method also takes a second argument, which is an object that itself can have properties and anonymous functions, which become the definitions of methods that enhance the individual dragging object.
Events available to dragging objects include:
onSnaponCompleteonDroponEnteronLeave
The MooTools site has several nice demonstrations of the Drag class. We are really familiar with those so that we have the best footing for expanding our own ideas on how to use them, not so that we can capitalize upon them in an as-is state. The link to the website is http://mootools.net/demos/.