mochikit_v14/doc/html/MochiKit/DragAndDrop.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.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('&quot;' + element.id + '&quot; 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>&nbsp; <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 &lt;<a class="reference" href="mailto:therve&#64;gmail.com">therve&#64;gmail.com</a>&gt;</li>
 169 <li>Bob Ippolito &lt;<a class="reference" href="mailto:bob&#64;redivi.com">bob&#64;redivi.com</a>&gt;</li>
 170 <li>Originally adapted from Script.aculo.us &lt;<a class="reference" href="http://script.aculo.us/">http://script.aculo.us/</a>&gt;</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 &lt;<a class="reference" href="mailto:bob&#64;redivi.com">bob&#64;redivi.com</a>&gt;.  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>