Commit | Line | Data |
---|---|---|
6a1aa64f DV |
1 | <?xml version="1.0" encoding="utf-8" ?> |
2 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
3 | ||
4 | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> | |
5 | <head> | |
6 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
7 | <meta name="generator" content="Docutils 0.4: http://docutils.sourceforge.net/" /> | |
8 | <title>MochiKit.DragAndDrop - drag and drop elements with MochiKit</title> | |
9 | ||
10 | <link rel="stylesheet" href="../../../include/css/documentation.css" type="text/css" /> | |
11 | <script type="text/javascript" src="../../../packed/MochiKit/MochiKit.js"></script> | |
12 | <script type="text/javascript" src="../../js/toc.js"></script> | |
13 | </head> | |
14 | <body> | |
15 | <div class="document"> | |
16 | <div class="section"> | |
17 | <h1><a id="name" name="name">Name</a></h1> | |
18 | <p>MochiKit.DragAndDrop - drag and drop elements with MochiKit</p> | |
19 | </div> | |
20 | <div class="section"> | |
21 | <h1><a id="synopsis" name="synopsis">Synopsis</a></h1> | |
22 | <pre class="literal-block"> | |
23 | // Create a draggable | |
24 | new Draggable('mydrag'); | |
25 | ||
26 | // Create a corresponding droppable | |
27 | new Droppable('mydrop', { | |
28 | accept: ['drag-class'], | |
29 | ondrop: function (element) { | |
30 | alert('"' + element.id + '" was dropped on me'); | |
31 | } | |
32 | }); | |
33 | </pre> | |
34 | </div> | |
35 | <div class="section"> | |
36 | <h1><a id="description" name="description">Description</a></h1> | |
37 | <p>MochiKit.DragAndDrop enables you the power of dragging elements | |
38 | through your pages, for richer interfaces.</p> | |
39 | </div> | |
40 | <div class="section"> | |
41 | <h1><a id="dependencies" name="dependencies">Dependencies</a></h1> | |
42 | <ul class="simple"> | |
43 | <li><a class="mochiref reference" href="Base.html">MochiKit.Base</a></li> | |
44 | <li><a class="mochiref reference" href="Iter.html">MochiKit.Iter</a></li> | |
45 | <li><a class="mochiref reference" href="DOM.html">MochiKit.DOM</a></li> | |
46 | <li><a class="mochiref reference" href="Color.html">MochiKit.Color</a></li> | |
47 | <li><a class="mochiref reference" href="Visual.html">MochiKit.Visual</a></li> | |
48 | <li><a class="mochiref reference" href="Signal.html">MochiKit.Signal</a></li> | |
49 | </ul> | |
50 | </div> | |
51 | <div class="section"> | |
52 | <h1><a id="overview" name="overview">Overview</a></h1> | |
53 | <p>The implementation was adapted from <a class="reference" href="http://script.aculo.us">Scriptaculous</a>.</p> | |
54 | </div> | |
55 | <div class="section"> | |
56 | <h1><a id="api-reference" name="api-reference">API Reference</a></h1> | |
57 | <div class="section"> | |
58 | <h2><a id="constructors" name="constructors">Constructors</a></h2> | |
59 | <p> | |
60 | <a name="fn-draggable"></a> | |
61 | <a class="mochidef reference" href="#fn-draggable">Draggable(element[, options])</a>:</p> | |
62 | <blockquote> | |
63 | <p>A object that can be drag with the mouse.</p> | |
64 | <p>You have the following options, with corresponding default values:</p> | |
65 | <dl class="docutils"> | |
66 | <dt><tt class="docutils literal"><span class="pre">handle</span> <span class="pre">(false)</span></tt>:</dt> | |
67 | <dd>Option for giving the element where starting the drag. By | |
68 | default it's the element itself, but you can either put a | |
69 | class of a subelement or the id of another element as handle.</dd> | |
70 | <dt><tt class="docutils literal"><span class="pre">starteffect</span> <span class="pre">(MochiKit.Visual.Opacity)</span></tt>:</dt> | |
71 | <dd>Function called once the drag has begun, taking the dragged | |
72 | element as argument. It's an effect by default but you can | |
73 | define any callback.</dd> | |
74 | <dt><tt class="docutils literal"><span class="pre">reverteffect</span> <span class="pre">(MochiKit.Visual.Move)</span></tt>:</dt> | |
75 | <dd>Effect applied when drag is cancelled. You have to define the | |
76 | <tt class="docutils literal"><span class="pre">revert</span></tt> option to enable the call. By default it brings the | |
77 | element back to its initial position, so you should know what | |
78 | you want when you modify this. The function should return an | |
79 | effect that can be cancelled.</dd> | |
80 | <dt><tt class="docutils literal"><span class="pre">endeffect</span> <span class="pre">(MochiKit.Visual.Opacity)</span></tt>:</dt> | |
81 | <dd>Pending part of starteffect. If you have modified your element | |
82 | during start, you'd usually want to revert it in the function.</dd> | |
83 | <dt><tt class="docutils literal"><span class="pre">zindex</span> <span class="pre">(1000)</span></tt>:</dt> | |
84 | <dd>Zindex of the drag element. By default it brings it to front.</dd> | |
85 | <dt><tt class="docutils literal"><span class="pre">revert</span> <span class="pre">(false)</span></tt>:</dt> | |
86 | <dd>Indicate if the reverteffect function should be called. If you | |
87 | define a function here, this function will be called before | |
88 | reverteffect, with the element as first argument.</dd> | |
89 | <dt><tt class="docutils literal"><span class="pre">snap</span> <span class="pre">(false)</span></tt>:</dt> | |
90 | <dd>Define the behaviour of the drag element when moving. It can | |
91 | either be a function, a value or an array of two values. If | |
92 | it's a function, it should take the (x, y) position of the | |
93 | element as arguments, and return the position draw in the | |
94 | browser. If its a value, it's used as a modulo for each | |
95 | coordinates. If it's an array, each value is applied for the | |
96 | corresponding coordinate.</dd> | |
97 | <dt><tt class="docutils literal"><span class="pre">selectclass</span> <span class="pre">(null)</span></tt>:</dt> | |
98 | <dd>If defined, name of CSS class applied during the drag.</dd> | |
99 | <dt><tt class="docutils literal"><span class="pre">ghosting</span> <span class="pre">(null)</span></tt>:</dt> | |
100 | <dd>Make a ghost from the draggable: clone it at start, then | |
101 | remove the clone at end.</dd> | |
102 | <dt><tt class="docutils literal"><span class="pre">onchange</span> <span class="pre">(MochiKit.Base.noop)</span></tt>:</dt> | |
103 | <dd>Function called when updates are made on the draggable object.</dd> | |
104 | <dt><tt class="docutils literal"><span class="pre">scroll</span> <span class="pre">(false)</span></tt>:</dt> | |
105 | <dd>Element to scroll around, if precised. For example, 'window' | |
106 | will allow the draggable to scroll in the page.</dd> | |
107 | <dt><tt class="docutils literal"><span class="pre">scrollSensitivity</span> <span class="pre">(20)</span></tt>:</dt> | |
108 | <dd>Scroll sensitivity, used when scroll is used.</dd> | |
109 | <dt><tt class="docutils literal"><span class="pre">scrollSpeed</span> <span class="pre">(15)</span></tt>:</dt> | |
110 | <dd>Scroll speed, used when scroll is used.</dd> | |
111 | </dl> | |
112 | <p>A draggable generates some signals during its lifetime: start, drag and | |
113 | end. They are available through the Draggables handler, and are called | |
114 | with a draggable as argument. You can register a callback for these events | |
115 | like this:</p> | |
116 | <pre class="literal-block"> | |
117 | onStart = function (draggable) { | |
118 | // Do some stuff | |
119 | }; | |
120 | ||
121 | connect(Draggables, 'start', onStart); | |
122 | </pre> | |
123 | <dl class="docutils"> | |
124 | <dt><em>Availability</em>:</dt> | |
125 | <dd>Available in MochiKit 1.4+</dd> | |
126 | </dl> | |
127 | </blockquote> | |
128 | <p> | |
129 | <a name="fn-droppable"></a> | |
130 | <a class="mochidef reference" href="#fn-droppable">Droppable(element[, options])</a>:</p> | |
131 | <blockquote> | |
132 | <p>A object where you can drop a draggable.</p> | |
133 | <p>You have the following options, with corresponding default values:</p> | |
134 | <dl class="docutils"> | |
135 | <dt><tt class="docutils literal"><span class="pre">greedy</span> <span class="pre">(true)</span></tt>:</dt> | |
136 | <dd>Stop on this droppable when a draggable drops over it.</dd> | |
137 | <dt><tt class="docutils literal"><span class="pre">hoverclass</span> <span class="pre">(null)</span></tt>:</dt> | |
138 | <dd>If defined, name of CSS class applied when a draggable is | |
139 | hover the droppable element (hover state).</dd> | |
140 | <dt><tt class="docutils literal"><span class="pre">hoverfunc</span> <span class="pre">(MochiKit.Base.noop)</span></tt>:</dt> | |
141 | <dd>Function called on hover state.</dd> | |
142 | <dt><tt class="docutils literal"><span class="pre">accept</span> <span class="pre">(null)</span></tt>:</dt> | |
143 | <dd>Array of CSS classes allowed to drop on this.</dd> | |
144 | <dt><tt class="docutils literal"><span class="pre">activeclass</span> <span class="pre">(null)</span></tt>:</dt> | |
145 | <dd>If defined, name of CSS class applied if a possible draggable | |
146 | begins its start (active state).</dd> | |
147 | <dt><tt class="docutils literal"><span class="pre">onactive</span> <span class="pre">(MochiKit.Base.noop)</span></tt>:</dt> | |
148 | <dd>Function called on active state.</dd> | |
149 | <dt><tt class="docutils literal"><span class="pre">containment</span> <span class="pre">([])</span></tt>:</dt> | |
150 | <dd>Specify a list of elements to check for active state: only the | |
151 | children of the specified elements can be dropped. Mainly | |
152 | useful for Sortable.</dd> | |
153 | <dt><tt class="docutils literal"><span class="pre">onhover</span> <span class="pre">(MochiKit.Base.noop)</span></tt>:</dt> | |
154 | <dd>Specific hover function, mainly used for Sortable.</dd> | |
155 | <dt><tt class="docutils literal"><span class="pre">ondrop</span> <span class="pre">(MochiKit.Base.noop)</span></tt>:</dt> | |
156 | <dd>Function called when a draggable is dropped. The function | |
157 | takes three arguments: the draggable element, the droppable | |
158 | element, and the event that raised the drop.</dd> | |
159 | <dt><em>Availability</em>:</dt> | |
160 | <dd>Available in MochiKit 1.4+</dd> | |
161 | </dl> | |
162 | </blockquote> | |
163 | </div> | |
164 | </div> | |
165 | <div class="section"> | |
166 | <h1><a id="authors" name="authors">Authors</a></h1> | |
167 | <ul class="simple"> | |
168 | <li>Thomas Herve <<a class="reference" href="mailto:therve@gmail.com">therve@gmail.com</a>></li> | |
169 | <li>Bob Ippolito <<a class="reference" href="mailto:bob@redivi.com">bob@redivi.com</a>></li> | |
170 | <li>Originally adapted from Script.aculo.us <<a class="reference" href="http://script.aculo.us/">http://script.aculo.us/</a>></li> | |
171 | </ul> | |
172 | </div> | |
173 | <div class="section"> | |
174 | <h1><a id="copyright" name="copyright">Copyright</a></h1> | |
175 | <p>Copyright 2005 Bob Ippolito <<a class="reference" href="mailto:bob@redivi.com">bob@redivi.com</a>>. This program is | |
176 | dual-licensed free software; you can redistribute it and/or modify it | |
177 | under the terms of the <a class="reference" href="http://www.opensource.org/licenses/mit-license.php">MIT License</a> or the <a class="reference" href="http://www.opensource.org/licenses/afl-2.1.php">Academic Free License | |
178 | v2.1</a>.</p> | |
179 | <p>Portions adapted from <a class="reference" href="http://script.aculo.us">Scriptaculous</a> are available under the terms | |
180 | of the <a class="reference" href="http://www.opensource.org/licenses/mit-license.php">MIT License</a>.</p> | |
181 | </div> | |
182 | </div> | |
183 | ||
184 | </body> | |
185 | </html> |