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">
4 <html xmlns=
"http://www.w3.org/1999/xhtml" xml:
lang=
"en" lang=
"en">
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>
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>
15 <div class=
"document">
17 <h1><a id=
"name" name=
"name">Name
</a></h1>
18 <p>MochiKit.Sortable - sortable with drag and drop lists
</p>
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
>
29 <script type=
"text/javascript
">
30 MochiKit.Sortable.Sortable.create('dnd_sortable');
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>
40 <h1><a id=
"dependencies" name=
"dependencies">Dependencies
</a></h1>
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>
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>
59 <h1><a id=
"api-reference" name=
"api-reference">API Reference
</a></h1>
61 <h2><a id=
"objects-defined" name=
"objects-defined">Objects defined
</a></h2>
63 <a name=
"fn-sortableobserver"></a>
64 <a class=
"mochidef reference" href=
"#fn-sortableobserver">SortableObserver
</a>:
</p>
66 <p>Observer for DragAndDrop object. You normally don't have to access
67 this, only for customization purpose.
</p>
69 <dt><em>Availability
</em>:
</dt>
70 <dd>Available in MochiKit
1.4+
</dd>
74 <a name=
"fn-sortable.create"></a>
75 <a class=
"mochidef reference" href=
"#fn-sortable.create">Sortable.create(element [, options])
</a>:
</p>
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">
92 <tr><td>dropOnEmpty
</td>
98 <tr><td>constraint
</td>
101 <tr><td>containment
</td>
110 <tr><td>hoverclass
</td>
113 <tr><td>ghosting
</td>
119 <tr><td>scrollSensitivity
</td>
122 <tr><td>scrollSpeed
</td>
126 <td>/^[^_]*_(.*)$/
</td>
128 <tr><td>onChange
</td>
129 <td>MochiKit.Base.noop
</td>
131 <tr><td>onUpdate
</td>
132 <td>MochiKit.Base.noop
</td>
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>
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>
174 <a name=
"fn-sortable.destroy"></a>
175 <a class=
"mochidef reference" href=
"#fn-sortable.destroy">Sortable.destroy(element)
</a>:
</p>
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>
185 <a name=
"fn-sortable.serialize"></a>
186 <a class=
"mochidef reference" href=
"#fn-sortable.serialize">Sortable.serialize(element [, options])
</a>:
</p>
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">
198 <td>tag from the Sortable
</td>
201 <td>only from the Sortable
</td>
204 <td>id of the element
</td>
207 <td>format of the Sortable or /^[^_]*_(.*)$
</td>
211 <dl class=
"docutils">
212 <dt><em>Availability
</em>:
</dt>
213 <dd>Available in MochiKit
1.4+
</dd>
218 <div class=
"section">
219 <h1><a id=
"authors" name=
"authors">Authors
</a></h1>
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>
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
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>