mochikit_v14/doc/html/MochiKit/Sortable.html

   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 &lt;ul id=&quot;dnd_sortable&quot;&gt;
  24     &lt;li&gt;mochibot.com&lt;/li&gt;
  25     &lt;li&gt;pythonmac.org&lt;/li&gt;
  26     &lt;li&gt;undefined.org&lt;/li&gt;
  27     &lt;li&gt;python.org&lt;/li&gt;
  28 &lt;/ul&gt;
  29 &lt;script type=&quot;text/javascript&quot;&gt;
  30   MochiKit.Sortable.Sortable.create('dnd_sortable');
  31 &lt;/script&gt;
  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&amp;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 &lt;<a class="reference" href="mailto:therve&#64;gmail.com">therve&#64;gmail.com</a>&gt;</li>
 222 <li>Bob Ippolito &lt;<a class="reference" href="mailto:bob&#64;redivi.com">bob&#64;redivi.com</a>&gt;</li>
 223 <li>Originally adapted from Script.aculo.us &lt;<a class="reference" href="http://script.aculo.us/">http://script.aculo.us/</a>&gt;</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 &lt;<a class="reference" href="mailto:bob&#64;redivi.com">bob&#64;redivi.com</a>&gt;.  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>