<?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/lib/MochiKit/MochiKit.js"></script>
<script type="text/javascript" src="../../js/toc.js"></script>
</head>
<body>
<a href="http://mochikit.com"><img id="mainlink" src="../../../include/_img/g_logo_doc.gif" alt="MochiKit" /></a>
<a class='indexlink' href='index.html'>Back to docs index</a>
<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">
<ul id="dnd_sortable">
<li>mochibot.com</li>
<li>pythonmac.org</li>
<li>undefined.org</li>
<li>python.org</li>
</ul>
<script type="text/javascript">
MochiKit.Sortable.Sortable.create('dnd_sortable');
</script>
</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&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>
<p>A bug with Internet Explorer rendering engine can cause a problem with the
default effect used on start (the symptom being that the rows vanish).
If you encounter this problem, pass <a class="mochiref reference" href="Base.html#fn-noop">MochiKit.Base.noop</a>
as the <tt class="docutils literal"><span class="pre">starteffect</span></tt> option.</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 <<a class="reference" href="mailto:therve@gmail.com">therve@gmail.com</a>></li>
<li>Bob Ippolito <<a class="reference" href="mailto:bob@redivi.com">bob@redivi.com</a>></li>
<li>Originally adapted from Script.aculo.us <<a class="reference" href="http://script.aculo.us/">http://script.aculo.us/</a>></li>
</ul>
</div>
<div class="section">
<h1><a id="copyright" name="copyright">Copyright</a></h1>
<p>Copyright 2005 Bob Ippolito <<a class="reference" href="mailto:bob@redivi.com">bob@redivi.com</a>>. 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>
