| 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.DragAndDrop - drag and drop elements with MochiKit</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.DragAndDrop - drag and drop elements with MochiKit</p> |
| 19 | </div> |
| 20 | <div class="section"> |
| 21 | <h1><a id="synopsis" name="synopsis">Synopsis</a></h1> |
| 22 | <pre class="literal-block"> |
| 23 | // Create a draggable |
| 24 | new Draggable('mydrag'); |
| 25 | |
| 26 | // Create a corresponding droppable |
| 27 | new Droppable('mydrop', { |
| 28 | accept: ['drag-class'], |
| 29 | ondrop: function (element) { |
| 30 | alert('"' + element.id + '" was dropped on me'); |
| 31 | } |
| 32 | }); |
| 33 | </pre> |
| 34 | </div> |
| 35 | <div class="section"> |
| 36 | <h1><a id="description" name="description">Description</a></h1> |
| 37 | <p>MochiKit.DragAndDrop enables you the power of dragging elements |
| 38 | through your pages, for richer interfaces.</p> |
| 39 | </div> |
| 40 | <div class="section"> |
| 41 | <h1><a id="dependencies" name="dependencies">Dependencies</a></h1> |
| 42 | <ul class="simple"> |
| 43 | <li><a class="mochiref reference" href="Base.html">MochiKit.Base</a></li> |
| 44 | <li><a class="mochiref reference" href="Iter.html">MochiKit.Iter</a></li> |
| 45 | <li><a class="mochiref reference" href="DOM.html">MochiKit.DOM</a></li> |
| 46 | <li><a class="mochiref reference" href="Color.html">MochiKit.Color</a></li> |
| 47 | <li><a class="mochiref reference" href="Visual.html">MochiKit.Visual</a></li> |
| 48 | <li><a class="mochiref reference" href="Signal.html">MochiKit.Signal</a></li> |
| 49 | </ul> |
| 50 | </div> |
| 51 | <div class="section"> |
| 52 | <h1><a id="overview" name="overview">Overview</a></h1> |
| 53 | <p>The implementation was adapted from <a class="reference" href="http://script.aculo.us">Scriptaculous</a>.</p> |
| 54 | </div> |
| 55 | <div class="section"> |
| 56 | <h1><a id="api-reference" name="api-reference">API Reference</a></h1> |
| 57 | <div class="section"> |
| 58 | <h2><a id="constructors" name="constructors">Constructors</a></h2> |
| 59 | <p> |
| 60 | <a name="fn-draggable"></a> |
| 61 | <a class="mochidef reference" href="#fn-draggable">Draggable(element[, options])</a>:</p> |
| 62 | <blockquote> |
| 63 | <p>A object that can be drag with the mouse.</p> |
| 64 | <p>You have the following options, with corresponding default values:</p> |
| 65 | <dl class="docutils"> |
| 66 | <dt><tt class="docutils literal"><span class="pre">handle</span> <span class="pre">(false)</span></tt>:</dt> |
| 67 | <dd>Option for giving the element where starting the drag. By |
| 68 | default it's the element itself, but you can either put a |
| 69 | class of a subelement or the id of another element as handle.</dd> |
| 70 | <dt><tt class="docutils literal"><span class="pre">starteffect</span> <span class="pre">(MochiKit.Visual.Opacity)</span></tt>:</dt> |
| 71 | <dd>Function called once the drag has begun, taking the dragged |
| 72 | element as argument. It's an effect by default but you can |
| 73 | define any callback.</dd> |
| 74 | <dt><tt class="docutils literal"><span class="pre">reverteffect</span> <span class="pre">(MochiKit.Visual.Move)</span></tt>:</dt> |
| 75 | <dd>Effect applied when drag is cancelled. You have to define the |
| 76 | <tt class="docutils literal"><span class="pre">revert</span></tt> option to enable the call. By default it brings the |
| 77 | element back to its initial position, so you should know what |
| 78 | you want when you modify this. The function should return an |
| 79 | effect that can be cancelled.</dd> |
| 80 | <dt><tt class="docutils literal"><span class="pre">endeffect</span> <span class="pre">(MochiKit.Visual.Opacity)</span></tt>:</dt> |
| 81 | <dd>Pending part of starteffect. If you have modified your element |
| 82 | during start, you'd usually want to revert it in the function.</dd> |
| 83 | <dt><tt class="docutils literal"><span class="pre">zindex</span> <span class="pre">(1000)</span></tt>:</dt> |
| 84 | <dd>Zindex of the drag element. By default it brings it to front.</dd> |
| 85 | <dt><tt class="docutils literal"><span class="pre">revert</span> <span class="pre">(false)</span></tt>:</dt> |
| 86 | <dd>Indicate if the reverteffect function should be called. If you |
| 87 | define a function here, this function will be called before |
| 88 | reverteffect, with the element as first argument.</dd> |
| 89 | <dt><tt class="docutils literal"><span class="pre">snap</span> <span class="pre">(false)</span></tt>:</dt> |
| 90 | <dd>Define the behaviour of the drag element when moving. It can |
| 91 | either be a function, a value or an array of two values. If |
| 92 | it's a function, it should take the (x, y) position of the |
| 93 | element as arguments, and return the position draw in the |
| 94 | browser. If its a value, it's used as a modulo for each |
| 95 | coordinates. If it's an array, each value is applied for the |
| 96 | corresponding coordinate.</dd> |
| 97 | <dt><tt class="docutils literal"><span class="pre">selectclass</span> <span class="pre">(null)</span></tt>:</dt> |
| 98 | <dd>If defined, name of CSS class applied during the drag.</dd> |
| 99 | <dt><tt class="docutils literal"><span class="pre">ghosting</span> <span class="pre">(null)</span></tt>:</dt> |
| 100 | <dd>Make a ghost from the draggable: clone it at start, then |
| 101 | remove the clone at end.</dd> |
| 102 | <dt><tt class="docutils literal"><span class="pre">onchange</span> <span class="pre">(MochiKit.Base.noop)</span></tt>:</dt> |
| 103 | <dd>Function called when updates are made on the draggable object.</dd> |
| 104 | <dt><tt class="docutils literal"><span class="pre">scroll</span> <span class="pre">(false)</span></tt>:</dt> |
| 105 | <dd>Element to scroll around, if precised. For example, 'window' |
| 106 | will allow the draggable to scroll in the page.</dd> |
| 107 | <dt><tt class="docutils literal"><span class="pre">scrollSensitivity</span> <span class="pre">(20)</span></tt>:</dt> |
| 108 | <dd>Scroll sensitivity, used when scroll is used.</dd> |
| 109 | <dt><tt class="docutils literal"><span class="pre">scrollSpeed</span> <span class="pre">(15)</span></tt>:</dt> |
| 110 | <dd>Scroll speed, used when scroll is used.</dd> |
| 111 | </dl> |
| 112 | <p>A draggable generates some signals during its lifetime: start, drag and |
| 113 | end. They are available through the Draggables handler, and are called |
| 114 | with a draggable as argument. You can register a callback for these events |
| 115 | like this:</p> |
| 116 | <pre class="literal-block"> |
| 117 | onStart = function (draggable) { |
| 118 | // Do some stuff |
| 119 | }; |
| 120 | |
| 121 | connect(Draggables, 'start', onStart); |
| 122 | </pre> |
| 123 | <dl class="docutils"> |
| 124 | <dt><em>Availability</em>:</dt> |
| 125 | <dd>Available in MochiKit 1.4+</dd> |
| 126 | </dl> |
| 127 | </blockquote> |
| 128 | <p> |
| 129 | <a name="fn-droppable"></a> |
| 130 | <a class="mochidef reference" href="#fn-droppable">Droppable(element[, options])</a>:</p> |
| 131 | <blockquote> |
| 132 | <p>A object where you can drop a draggable.</p> |
| 133 | <p>You have the following options, with corresponding default values:</p> |
| 134 | <dl class="docutils"> |
| 135 | <dt><tt class="docutils literal"><span class="pre">greedy</span> <span class="pre">(true)</span></tt>:</dt> |
| 136 | <dd>Stop on this droppable when a draggable drops over it.</dd> |
| 137 | <dt><tt class="docutils literal"><span class="pre">hoverclass</span> <span class="pre">(null)</span></tt>:</dt> |
| 138 | <dd>If defined, name of CSS class applied when a draggable is |
| 139 | hover the droppable element (hover state).</dd> |
| 140 | <dt><tt class="docutils literal"><span class="pre">hoverfunc</span> <span class="pre">(MochiKit.Base.noop)</span></tt>:</dt> |
| 141 | <dd>Function called on hover state.</dd> |
| 142 | <dt><tt class="docutils literal"><span class="pre">accept</span> <span class="pre">(null)</span></tt>:</dt> |
| 143 | <dd>Array of CSS classes allowed to drop on this.</dd> |
| 144 | <dt><tt class="docutils literal"><span class="pre">activeclass</span> <span class="pre">(null)</span></tt>:</dt> |
| 145 | <dd>If defined, name of CSS class applied if a possible draggable |
| 146 | begins its start (active state).</dd> |
| 147 | <dt><tt class="docutils literal"><span class="pre">onactive</span> <span class="pre">(MochiKit.Base.noop)</span></tt>:</dt> |
| 148 | <dd>Function called on active state.</dd> |
| 149 | <dt><tt class="docutils literal"><span class="pre">containment</span> <span class="pre">([])</span></tt>:</dt> |
| 150 | <dd>Specify a list of elements to check for active state: only the |
| 151 | children of the specified elements can be dropped. Mainly |
| 152 | useful for Sortable.</dd> |
| 153 | <dt><tt class="docutils literal"><span class="pre">onhover</span> <span class="pre">(MochiKit.Base.noop)</span></tt>:</dt> |
| 154 | <dd>Specific hover function, mainly used for Sortable.</dd> |
| 155 | <dt><tt class="docutils literal"><span class="pre">ondrop</span> <span class="pre">(MochiKit.Base.noop)</span></tt>:</dt> |
| 156 | <dd>Function called when a draggable is dropped. The function |
| 157 | takes three arguments: the draggable element, the droppable |
| 158 | element, and the event that raised the drop.</dd> |
| 159 | <dt><em>Availability</em>:</dt> |
| 160 | <dd>Available in MochiKit 1.4+</dd> |
| 161 | </dl> |
| 162 | </blockquote> |
| 163 | </div> |
| 164 | </div> |
| 165 | <div class="section"> |
| 166 | <h1><a id="authors" name="authors">Authors</a></h1> |
| 167 | <ul class="simple"> |
| 168 | <li>Thomas Herve <<a class="reference" href="mailto:therve@gmail.com">therve@gmail.com</a>></li> |
| 169 | <li>Bob Ippolito <<a class="reference" href="mailto:bob@redivi.com">bob@redivi.com</a>></li> |
| 170 | <li>Originally adapted from Script.aculo.us <<a class="reference" href="http://script.aculo.us/">http://script.aculo.us/</a>></li> |
| 171 | </ul> |
| 172 | </div> |
| 173 | <div class="section"> |
| 174 | <h1><a id="copyright" name="copyright">Copyright</a></h1> |
| 175 | <p>Copyright 2005 Bob Ippolito <<a class="reference" href="mailto:bob@redivi.com">bob@redivi.com</a>>. This program is |
| 176 | dual-licensed free software; you can redistribute it and/or modify it |
| 177 | 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 |
| 178 | v2.1</a>.</p> |
| 179 | <p>Portions adapted from <a class="reference" href="http://script.aculo.us">Scriptaculous</a> are available under the terms |
| 180 | of the <a class="reference" href="http://www.opensource.org/licenses/mit-license.php">MIT License</a>.</p> |
| 181 | </div> |
| 182 | </div> |
| 183 | |
| 184 | </body> |
| 185 | </html> |