- MooTools 1.3 Cookbook
- Jay Larry G. Johnston
- 382字
- 2021-04-02 19:07:06
Dragging an HTML element
HTML can be moved around on a page with a click-and-hold while moving the mouse.
Getting ready
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.
How to do it...
<!-- 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>
How it works...
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.
There's more...
Events available to dragging objects include:
onSnaponCompleteonDroponEnteronLeave
See also
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/.
- MATLAB計算機視覺經典應用
- 持續演進的Cloud Native：云原生架構下微服務最佳實踐
- 軟件定義數據中心：技術與實踐
- Excel 數據處理與分析實例教程（第2版）
- Python數據分析實戰：從Excel輕松入門Pandas
- WordPress Theme Design
- 中文版CorelDRAW X6基礎培訓教程（第2版）
- Photoshop+AE UI動效設計從新手到高手
- 深入淺出WebAssembly
- AI繪畫精講：Stable Diffusion從入門到精通
- Revit 2022中文版完全自學一本通
- C# 2008 and 2005 Threaded Programming: Beginner's Guide
- After Effects 動態圖形設計：入門技法與基礎創作
- Photoshop CC UI設計案例教程（全彩慕課版·第2版）
- 基于股票大數據分析的Python入門實戰（視頻教學版）