[dygraphs.git] / mochikit_v14 / doc / html / MochiKit / Sortable.html

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="Docutils 0.4: http://docutils.sourceforge.net/" />
<title>MochiKit.Sortable - sortable with drag and drop lists</title>

<link rel="stylesheet" href="../../../include/css/documentation.css" type="text/css" />
<script type="text/javascript" src="../../../packed/MochiKit/MochiKit.js"></script>
<script type="text/javascript" src="../../js/toc.js"></script>
</head>
<body>
<div class="document">
<div class="section">
<h1><a id="name" name="name">Name</a></h1>
<p>MochiKit.Sortable - sortable with drag and drop lists</p>
</div>
<div class="section">
<h1><a id="synopsis" name="synopsis">Synopsis</a></h1>
<pre class="literal-block">
&lt;ul id=&quot;dnd_sortable&quot;&gt;
    &lt;li&gt;mochibot.com&lt;/li&gt;
    &lt;li&gt;pythonmac.org&lt;/li&gt;
    &lt;li&gt;undefined.org&lt;/li&gt;
    &lt;li&gt;python.org&lt;/li&gt;
&lt;/ul&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
  MochiKit.Sortable.Sortable.create('dnd_sortable');
&lt;/script&gt;
</pre>
</div>
<div class="section">
<h1><a id="description" name="description">Description</a></h1>
<p>MochiKit.Sortable add a new Sortable object to manipulate easily
drag&amp;drop in lists.</p>
</div>
<div class="section">
<h1><a id="dependencies" name="dependencies">Dependencies</a></h1>
<ul class="simple">
<li><a class="mochiref reference" href="Base.html">MochiKit.Base</a></li>
<li><a class="mochiref reference" href="Iter.html">MochiKit.Iter</a></li>
<li><a class="mochiref reference" href="DOM.html">MochiKit.DOM</a></li>
<li><a class="mochiref reference" href="Color.html">MochiKit.Color</a></li>
<li><a class="mochiref reference" href="Visual.html">MochiKit.Visual</a></li>
<li><a class="mochiref reference" href="Signal.html">MochiKit.Signal</a></li>
<li><a class="mochiref reference" href="DragAndDrop.html">MochiKit.DragAndDrop</a></li>
</ul>
</div>
<div class="section">
<h1><a id="overview" name="overview">Overview</a></h1>
<p>MochiKit.Sortable mainly contains the Sortable object offering
facilities to manipulate a list and drag its items to reorder it. It
can also be serialized for being send to server. It is ported from
<a class="reference" href="http://script.aculo.us">Scriptaculous</a>.</p>
</div>
<div class="section">
<h1><a id="api-reference" name="api-reference">API Reference</a></h1>
<div class="section">
<h2><a id="objects-defined" name="objects-defined">Objects defined</a></h2>
<p>
<a name="fn-sortableobserver"></a>
<a class="mochidef reference" href="#fn-sortableobserver">SortableObserver</a>:</p>
<blockquote>
<p>Observer for DragAndDrop object. You normally don't have to access
this, only for customization purpose.</p>
<dl class="docutils">
<dt><em>Availability</em>:</dt>
<dd>Available in MochiKit 1.4+</dd>
</dl>
</blockquote>
<p>
<a name="fn-sortable.create"></a>
<a class="mochidef reference" href="#fn-sortable.create">Sortable.create(element [, options])</a>:</p>
<blockquote>
<p>Create a new Sortable. Usually you'll call it with a UL element,
but it can be customized with options to use something else.</p>
<p>You have the following options:</p>
<table border="1" class="docutils">
<colgroup>
<col width="49%" />
<col width="51%" />
</colgroup>
<tbody valign="top">
<tr><td>element</td>
<td>element</td>
</tr>
<tr><td>tag</td>
<td>'li'</td>
</tr>
<tr><td>dropOnEmpty</td>
<td>false</td>
</tr>
<tr><td>overlap</td>
<td>'vertical'</td>
</tr>
<tr><td>constraint</td>
<td>'vertical'</td>
</tr>
<tr><td>containment</td>
<td>element</td>
</tr>
<tr><td>handle</td>
<td>false</td>
</tr>
<tr><td>only</td>
<td>false</td>
</tr>
<tr><td>hoverclass</td>
<td>null</td>
</tr>
<tr><td>ghosting</td>
<td>false</td>
</tr>
<tr><td>scroll</td>
<td>false</td>
</tr>
<tr><td>scrollSensitivity</td>
<td>20</td>
</tr>
<tr><td>scrollSpeed</td>
<td>15</td>
</tr>
<tr><td>format</td>
<td>/^[^_]*_(.*)$/</td>
</tr>
<tr><td>onChange</td>
<td>MochiKit.Base.noop</td>
</tr>
<tr><td>onUpdate</td>
<td>MochiKit.Base.noop</td>
</tr>
<tr><td>tree</td>
<td>false</td>
</tr>
<tr><td>treeTag</td>
<td>'ul'</td>
</tr>
</tbody>
</table>
<dl class="docutils">
<dt><tt class="docutils literal"><span class="pre">tag</span></tt>:</dt>
<dd>Name of the tag used to make the draggable elements. It matches all
the childNodes of the Sortable element with this tag.</dd>
<dt><tt class="docutils literal"><span class="pre">only</span></tt>:</dt>
<dd>Class or array of classes used to filter the children, combined with
the tag criteria.</dd>
<dt><tt class="docutils literal"><span class="pre">format</span></tt>:</dt>
<dd>Regular expression which serves as a match filter for serialization,
on children' ids. For example, with the default value, you'll get
['1', '2', '3', '4'] with ids ['sort_1', 'sort_2', 'sort_3', 'sort_4'].</dd>
<dt><tt class="docutils literal"><span class="pre">onChange</span></tt>:</dt>
<dd>Callback called when an element moves between others in the Sortable.
It's called for <em>each</em> movements, even if you don't release the mouse.</dd>
<dt><tt class="docutils literal"><span class="pre">onUpdate</span></tt>:</dt>
<dd>Callback called when the order changes in the Sortable. It's called
only if the Sortable is modified, after you dropped an element.</dd>
<dt><tt class="docutils literal"><span class="pre">tree</span></tt>:</dt>
<dd>Option for creating a Sortable tree. It's an experimental
setting, that can be very slow even with a few elements. You
can customize its behaviour with the <tt class="docutils literal"><span class="pre">treeTag</span></tt> option, that
defines the node used to make branches in your tree (that
contains leaves).</dd>
</dl>
<p>Other options are passed to the Draggables and Droppables objects created.
Refer to <a class="mochiref reference" href="DragAndDrop.html">MochiKit.DragAndDrop</a> for more information.</p>
<dl class="docutils">
<dt><em>Availability</em>:</dt>
<dd>Available in MochiKit 1.4+</dd>
</dl>
</blockquote>
<p>
<a name="fn-sortable.destroy"></a>
<a class="mochidef reference" href="#fn-sortable.destroy">Sortable.destroy(element)</a>:</p>
<blockquote>
<p>Destroy a previously created sortable. It prevents further use of
the Sortable functionnality on the element, unless recreated.</p>
<dl class="docutils">
<dt><em>Availability</em>:</dt>
<dd>Available in MochiKit 1.4+</dd>
</dl>
</blockquote>
<p>
<a name="fn-sortable.serialize"></a>
<a class="mochidef reference" href="#fn-sortable.serialize">Sortable.serialize(element [, options])</a>:</p>
<blockquote>
<p>Serialize the content of a Sortable. Useful to send this content
through a XMLHTTPRequest. The options overrides the ones of the Sortable
only for the serialization.</p>
<table border="1" class="docutils">
<colgroup>
<col width="13%" />
<col width="88%" />
</colgroup>
<tbody valign="top">
<tr><td>tag</td>
<td>tag from the Sortable</td>
</tr>
<tr><td>only</td>
<td>only from the Sortable</td>
</tr>
<tr><td>name</td>
<td>id of the element</td>
</tr>
<tr><td>format</td>
<td>format of the Sortable or /^[^_]*_(.*)$</td>
</tr>
</tbody>
</table>
<dl class="docutils">
<dt><em>Availability</em>:</dt>
<dd>Available in MochiKit 1.4+</dd>
</dl>
</blockquote>
</div>
</div>
<div class="section">
<h1><a id="authors" name="authors">Authors</a></h1>
<ul class="simple">
<li>Thomas Herve &lt;<a class="reference" href="mailto:therve&#64;gmail.com">therve&#64;gmail.com</a>&gt;</li>
<li>Bob Ippolito &lt;<a class="reference" href="mailto:bob&#64;redivi.com">bob&#64;redivi.com</a>&gt;</li>
<li>Originally adapted from Script.aculo.us &lt;<a class="reference" href="http://script.aculo.us/">http://script.aculo.us/</a>&gt;</li>
</ul>
</div>
<div class="section">
<h1><a id="copyright" name="copyright">Copyright</a></h1>
<p>Copyright 2005 Bob Ippolito &lt;<a class="reference" href="mailto:bob&#64;redivi.com">bob&#64;redivi.com</a>&gt;.  This program is
dual-licensed free software; you can redistribute it and/or modify it
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
v2.1</a>.</p>
<p>Portions adapted from <a class="reference" href="http://script.aculo.us">Scriptaculous</a> are available under the terms
of the <a class="reference" href="http://www.opensource.org/licenses/mit-license.php">MIT License</a>.</p>
</div>
</div>

</body>
</html>
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>