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.Sortable - sortable with drag and drop lists</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.Sortable - sortable with drag and drop lists</p> | |
19 | </div> | |
20 | <div class="section"> | |
21 | <h1><a id="synopsis" name="synopsis">Synopsis</a></h1> | |
22 | <pre class="literal-block"> | |
23 | <ul id="dnd_sortable"> | |
24 | <li>mochibot.com</li> | |
25 | <li>pythonmac.org</li> | |
26 | <li>undefined.org</li> | |
27 | <li>python.org</li> | |
28 | </ul> | |
29 | <script type="text/javascript"> | |
30 | MochiKit.Sortable.Sortable.create('dnd_sortable'); | |
31 | </script> | |
32 | </pre> | |
33 | </div> | |
34 | <div class="section"> | |
35 | <h1><a id="description" name="description">Description</a></h1> | |
36 | <p>MochiKit.Sortable add a new Sortable object to manipulate easily | |
37 | drag&drop in lists.</p> | |
38 | </div> | |
39 | <div class="section"> | |
40 | <h1><a id="dependencies" name="dependencies">Dependencies</a></h1> | |
41 | <ul class="simple"> | |
42 | <li><a class="mochiref reference" href="Base.html">MochiKit.Base</a></li> | |
43 | <li><a class="mochiref reference" href="Iter.html">MochiKit.Iter</a></li> | |
44 | <li><a class="mochiref reference" href="DOM.html">MochiKit.DOM</a></li> | |
45 | <li><a class="mochiref reference" href="Color.html">MochiKit.Color</a></li> | |
46 | <li><a class="mochiref reference" href="Visual.html">MochiKit.Visual</a></li> | |
47 | <li><a class="mochiref reference" href="Signal.html">MochiKit.Signal</a></li> | |
48 | <li><a class="mochiref reference" href="DragAndDrop.html">MochiKit.DragAndDrop</a></li> | |
49 | </ul> | |
50 | </div> | |
51 | <div class="section"> | |
52 | <h1><a id="overview" name="overview">Overview</a></h1> | |
53 | <p>MochiKit.Sortable mainly contains the Sortable object offering | |
54 | facilities to manipulate a list and drag its items to reorder it. It | |
55 | can also be serialized for being send to server. It is ported from | |
56 | <a class="reference" href="http://script.aculo.us">Scriptaculous</a>.</p> | |
57 | </div> | |
58 | <div class="section"> | |
59 | <h1><a id="api-reference" name="api-reference">API Reference</a></h1> | |
60 | <div class="section"> | |
61 | <h2><a id="objects-defined" name="objects-defined">Objects defined</a></h2> | |
62 | <p> | |
63 | <a name="fn-sortableobserver"></a> | |
64 | <a class="mochidef reference" href="#fn-sortableobserver">SortableObserver</a>:</p> | |
65 | <blockquote> | |
66 | <p>Observer for DragAndDrop object. You normally don't have to access | |
67 | this, only for customization purpose.</p> | |
68 | <dl class="docutils"> | |
69 | <dt><em>Availability</em>:</dt> | |
70 | <dd>Available in MochiKit 1.4+</dd> | |
71 | </dl> | |
72 | </blockquote> | |
73 | <p> | |
74 | <a name="fn-sortable.create"></a> | |
75 | <a class="mochidef reference" href="#fn-sortable.create">Sortable.create(element [, options])</a>:</p> | |
76 | <blockquote> | |
77 | <p>Create a new Sortable. Usually you'll call it with a UL element, | |
78 | but it can be customized with options to use something else.</p> | |
79 | <p>You have the following options:</p> | |
80 | <table border="1" class="docutils"> | |
81 | <colgroup> | |
82 | <col width="49%" /> | |
83 | <col width="51%" /> | |
84 | </colgroup> | |
85 | <tbody valign="top"> | |
86 | <tr><td>element</td> | |
87 | <td>element</td> | |
88 | </tr> | |
89 | <tr><td>tag</td> | |
90 | <td>'li'</td> | |
91 | </tr> | |
92 | <tr><td>dropOnEmpty</td> | |
93 | <td>false</td> | |
94 | </tr> | |
95 | <tr><td>overlap</td> | |
96 | <td>'vertical'</td> | |
97 | </tr> | |
98 | <tr><td>constraint</td> | |
99 | <td>'vertical'</td> | |
100 | </tr> | |
101 | <tr><td>containment</td> | |
102 | <td>element</td> | |
103 | </tr> | |
104 | <tr><td>handle</td> | |
105 | <td>false</td> | |
106 | </tr> | |
107 | <tr><td>only</td> | |
108 | <td>false</td> | |
109 | </tr> | |
110 | <tr><td>hoverclass</td> | |
111 | <td>null</td> | |
112 | </tr> | |
113 | <tr><td>ghosting</td> | |
114 | <td>false</td> | |
115 | </tr> | |
116 | <tr><td>scroll</td> | |
117 | <td>false</td> | |
118 | </tr> | |
119 | <tr><td>scrollSensitivity</td> | |
120 | <td>20</td> | |
121 | </tr> | |
122 | <tr><td>scrollSpeed</td> | |
123 | <td>15</td> | |
124 | </tr> | |
125 | <tr><td>format</td> | |
126 | <td>/^[^_]*_(.*)$/</td> | |
127 | </tr> | |
128 | <tr><td>onChange</td> | |
129 | <td>MochiKit.Base.noop</td> | |
130 | </tr> | |
131 | <tr><td>onUpdate</td> | |
132 | <td>MochiKit.Base.noop</td> | |
133 | </tr> | |
134 | <tr><td>tree</td> | |
135 | <td>false</td> | |
136 | </tr> | |
137 | <tr><td>treeTag</td> | |
138 | <td>'ul'</td> | |
139 | </tr> | |
140 | </tbody> | |
141 | </table> | |
142 | <dl class="docutils"> | |
143 | <dt><tt class="docutils literal"><span class="pre">tag</span></tt>:</dt> | |
144 | <dd>Name of the tag used to make the draggable elements. It matches all | |
145 | the childNodes of the Sortable element with this tag.</dd> | |
146 | <dt><tt class="docutils literal"><span class="pre">only</span></tt>:</dt> | |
147 | <dd>Class or array of classes used to filter the children, combined with | |
148 | the tag criteria.</dd> | |
149 | <dt><tt class="docutils literal"><span class="pre">format</span></tt>:</dt> | |
150 | <dd>Regular expression which serves as a match filter for serialization, | |
151 | on children' ids. For example, with the default value, you'll get | |
152 | ['1', '2', '3', '4'] with ids ['sort_1', 'sort_2', 'sort_3', 'sort_4'].</dd> | |
153 | <dt><tt class="docutils literal"><span class="pre">onChange</span></tt>:</dt> | |
154 | <dd>Callback called when an element moves between others in the Sortable. | |
155 | It's called for <em>each</em> movements, even if you don't release the mouse.</dd> | |
156 | <dt><tt class="docutils literal"><span class="pre">onUpdate</span></tt>:</dt> | |
157 | <dd>Callback called when the order changes in the Sortable. It's called | |
158 | only if the Sortable is modified, after you dropped an element.</dd> | |
159 | <dt><tt class="docutils literal"><span class="pre">tree</span></tt>:</dt> | |
160 | <dd>Option for creating a Sortable tree. It's an experimental | |
161 | setting, that can be very slow even with a few elements. You | |
162 | can customize its behaviour with the <tt class="docutils literal"><span class="pre">treeTag</span></tt> option, that | |
163 | defines the node used to make branches in your tree (that | |
164 | contains leaves).</dd> | |
165 | </dl> | |
166 | <p>Other options are passed to the Draggables and Droppables objects created. | |
167 | Refer to <a class="mochiref reference" href="DragAndDrop.html">MochiKit.DragAndDrop</a> for more information.</p> | |
168 | <dl class="docutils"> | |
169 | <dt><em>Availability</em>:</dt> | |
170 | <dd>Available in MochiKit 1.4+</dd> | |
171 | </dl> | |
172 | </blockquote> | |
173 | <p> | |
174 | <a name="fn-sortable.destroy"></a> | |
175 | <a class="mochidef reference" href="#fn-sortable.destroy">Sortable.destroy(element)</a>:</p> | |
176 | <blockquote> | |
177 | <p>Destroy a previously created sortable. It prevents further use of | |
178 | the Sortable functionnality on the element, unless recreated.</p> | |
179 | <dl class="docutils"> | |
180 | <dt><em>Availability</em>:</dt> | |
181 | <dd>Available in MochiKit 1.4+</dd> | |
182 | </dl> | |
183 | </blockquote> | |
184 | <p> | |
185 | <a name="fn-sortable.serialize"></a> | |
186 | <a class="mochidef reference" href="#fn-sortable.serialize">Sortable.serialize(element [, options])</a>:</p> | |
187 | <blockquote> | |
188 | <p>Serialize the content of a Sortable. Useful to send this content | |
189 | through a XMLHTTPRequest. The options overrides the ones of the Sortable | |
190 | only for the serialization.</p> | |
191 | <table border="1" class="docutils"> | |
192 | <colgroup> | |
193 | <col width="13%" /> | |
194 | <col width="88%" /> | |
195 | </colgroup> | |
196 | <tbody valign="top"> | |
197 | <tr><td>tag</td> | |
198 | <td>tag from the Sortable</td> | |
199 | </tr> | |
200 | <tr><td>only</td> | |
201 | <td>only from the Sortable</td> | |
202 | </tr> | |
203 | <tr><td>name</td> | |
204 | <td>id of the element</td> | |
205 | </tr> | |
206 | <tr><td>format</td> | |
207 | <td>format of the Sortable or /^[^_]*_(.*)$</td> | |
208 | </tr> | |
209 | </tbody> | |
210 | </table> | |
211 | <dl class="docutils"> | |
212 | <dt><em>Availability</em>:</dt> | |
213 | <dd>Available in MochiKit 1.4+</dd> | |
214 | </dl> | |
215 | </blockquote> | |
216 | </div> | |
217 | </div> | |
218 | <div class="section"> | |
219 | <h1><a id="authors" name="authors">Authors</a></h1> | |
220 | <ul class="simple"> | |
221 | <li>Thomas Herve <<a class="reference" href="mailto:therve@gmail.com">therve@gmail.com</a>></li> | |
222 | <li>Bob Ippolito <<a class="reference" href="mailto:bob@redivi.com">bob@redivi.com</a>></li> | |
223 | <li>Originally adapted from Script.aculo.us <<a class="reference" href="http://script.aculo.us/">http://script.aculo.us/</a>></li> | |
224 | </ul> | |
225 | </div> | |
226 | <div class="section"> | |
227 | <h1><a id="copyright" name="copyright">Copyright</a></h1> | |
228 | <p>Copyright 2005 Bob Ippolito <<a class="reference" href="mailto:bob@redivi.com">bob@redivi.com</a>>. This program is | |
229 | dual-licensed free software; you can redistribute it and/or modify it | |
230 | 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 | |
231 | v2.1</a>.</p> | |
232 | <p>Portions adapted from <a class="reference" href="http://script.aculo.us">Scriptaculous</a> are available under the terms | |
233 | of the <a class="reference" href="http://www.opensource.org/licenses/mit-license.php">MIT License</a>.</p> | |
234 | </div> | |
235 | </div> | |
236 | ||
237 | </body> | |
238 | </html> |