mochikit_v14/examples/simple_dnd/index.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
   2         "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
   3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
   4   <head>
   5     <title>Test Drag and drop with MochiKit</title>
   6     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   7     <link href="simple_dnd.css" rel="stylesheet" type="text/css" />
   8     <script type="text/javascript" src="../../MochiKit/MochiKit.js"></script>
   9     <script type="text/javascript" src="../../MochiKit/Position.js"></script>
  10     <script type="text/javascript" src="../../MochiKit/Visual.js"></script>
  11     <script type="text/javascript" src="../../MochiKit/DragAndDrop.js"></script>
  12   </head>
  13   <body>
  14     <h3>Drag and Drop examples.</h3>
  15     <div>
  16         <div id="drag-1" class="drag">test drag 1</div>
  17         <div id="drag-2" class="drag">test drag 2 (horizontal)</div>
  18         <div id="drag-3" class="drag">test drag 3 (vertical)</div>
  19         <div id="drag-4" class="drag">test drag 4 (selectclass)</div>
  20         <div id="drag-5" class="drag">test drag 5 (fixed)</div>
  21         <div id="drag-6" class="drag">test drag 6 (absolute)</div>
  22         <div id="drag-7" class="drag">test drag 7 (relative)</div>
  23         <div id="drag-8" class="drag">test drag 8 (handle)</div>
  24         <div id="handle" class="drag">handle for drag 8</div>
  25     </div>
  26     <div id="dropzones">
  27         <div id="drop-1" class="drop">test drop 1</div>
  28         <div id="drop-2" class="drop">test drop 2 (hoverclass)</div>
  29         <div id="drop-3" class="drop">test drop 3 (activeclass)</div>
  30         <div id="drop-4" class="drop">test drop 4 (hoverFunc)</div>
  31         <div id="drop-5" class="drop">test drop 5 (activeFunc)</div>
  32         <div id="drop-6">test drop 6</div>
  33         <div id="droptext">No select</div>
  34     </div>
  35     <script type="text/javascript">
  36     <!--
  37     var saveTxt = "";
  38     onHoverFunc = function (element, onhover) {
  39         if (onhover) {
  40             saveTxt = element.childNodes[0].nodeValue;
  41             element.childNodes[0].nodeValue = "Please drop on me!";
  42         } else {
  43         element.childNodes[0].nodeValue = saveTxt;
  44         }
  45     };
  46     onActiveFunc = function (element, dragElt) {
  47         element.childNodes[0].nodeValue += " and I'm active ! (" + dragElt.id + ")";
  48     };
  49     onDesactiveFunc = function (element, dragElt) {
  50         var ind = element.childNodes[0].nodeValue.lastIndexOf(" and I'm active !");
  51         element.childNodes[0].nodeValue = element.childNodes[0].nodeValue.slice(0, ind);
  52     };
  53     onSelectFunc = function (element) {
  54         new MochiKit.Visual.Highlight(element);
  55     };
  56     onDeselectFunc = function (element) {
  57         element.childNodes[0].nodeValue += ".";
  58     };
  59     ondrop = function (element, dropElt) {
  60         MochiKit.Visual.pulsate(dropElt);
  61         MochiKit.DOM.getElement('droptext').childNodes[0].nodeValue = "Selected: " + element.id;
  62     };
  63
  64     new MochiKit.DragAndDrop.Draggable('drag-1', {'revert': true, 'ghosting': true});
  65     new MochiKit.DragAndDrop.Draggable('drag-2', {'revert': true, 'constraint': 'horizontal'});
  66     new MochiKit.DragAndDrop.Draggable('drag-3', {'revert': true, 'constraint': 'vertical'});
  67     new MochiKit.DragAndDrop.Draggable('drag-4', {'revert': true, 'selectclass': 'drag-select'});
  68     new MochiKit.DragAndDrop.Draggable('drag-5', {'revert': true, 'starteffect': onSelectFunc, 'endeffect': onDeselectFunc});
  69     new MochiKit.DragAndDrop.Draggable('drag-6', {'revert': true});
  70     new MochiKit.DragAndDrop.Draggable('drag-7', {'revert': true});
  71     new MochiKit.DragAndDrop.Draggable('drag-8', {'revert': true, 'handle': 'handle'});
  72
  73     new MochiKit.DragAndDrop.Droppable('drop-1', {'ondrop': ondrop});
  74     new MochiKit.DragAndDrop.Droppable('drop-2', {'ondrop': ondrop, 'hoverclass': 'drop-hover'});
  75     new MochiKit.DragAndDrop.Droppable('drop-3', {'ondrop': ondrop, 'activeclass': 'drop-active'});
  76     new MochiKit.DragAndDrop.Droppable('drop-4', {'ondrop': ondrop, 'hoverfunc': onHoverFunc});
  77     new MochiKit.DragAndDrop.Droppable('drop-5', {'ondrop': ondrop, 'onactive': onActiveFunc, 'ondesactive': onDesactiveFunc});
  78     new MochiKit.DragAndDrop.Droppable('drop-6', {'ondrop': ondrop, 'transparent': true});
  79     // -->
  80     </script>
  81     <div>
  82     Links to other samples:
  83     <ul>
  84     <li><a href="dnd_boxes.html">Boxes DND</a></li>
  85     <li><a href="dnd_hoverclass.html">Hoverclass DND</a></li>
  86     <li><a href="dnd_snap.html">Snap DND</a></li>
  87     <li><a href="dnd_ghost.html">Ghost DND</a></li>
  88     <li><a href="dnd_scroll.html">Scroll DND</a></li>
  89     <li><a href="dnd_full.html">Full DND</a></li>
  90     </ul>
  91     </div>
  92     </body>
  93 </html>