swat/apps/qooxdoo-examples/test/Tree_6.html

   1 <html>
   2 <head>
   3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   4   <title>qooxdoo &raquo; Demo</title>
   5   <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/>
   6   <!--[if IE]>
   7   <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/>
   8   <![endif]-->
   9   <script type="text/javascript" src="../../script/qx.js"></script>
  10 </head>
  11 <body>
  12   <script type="text/javascript" src="../../script/layout.js"></script>
  13
  14   <div id="demoDescription">
  15     <p>Drag and Drop between trees and inside a tree.</p>
  16     <p>Added support for positioned move/insert (not complete yet!)</p>
  17   </div>
  18
  19   <script type="text/javascript">
  20     qx.core.Init.getInstance().defineMain(function()
  21     {
  22       var vLastIndex = null;
  23
  24       function handleDragStart(e)
  25       {
  26         e.addData("qx.ui.tree.AbstractTreeElement", e.getCurrentTarget());
  27         e.addAction("move");
  28         e.startDrag();
  29       };
  30
  31       function handleDragDrop(e)
  32       {
  33         var vType = e.getDropDataTypes()[0];
  34         var vSource = e.getData(vType);
  35         var vTarget = e.getCurrentTarget();
  36
  37         vSource.getTree().getManager().deselectAll();
  38
  39         // this.debug("Add At: " + vLastIndex);
  40
  41         vLastIndex == null ? vTarget.addAtEnd(vSource) : vTarget.addBefore(vSource, vLastIndex);
  42         vLastIndex = null;
  43
  44         e.stopPropagation();
  45         treeMarkerLine.setStyleProperty("display", "none");
  46       };
  47
  48       function supportsDrop(vDragCache) {
  49         return !vDragCache.sourceWidget.contains(this);
  50       };
  51
  52       function handleDragOver(e)
  53       {
  54         var l = e.getTarget().getLabelObject();
  55         l.setStyleProperty("textDecoration", "underline");
  56       };
  57
  58       function handleDragOut(e)
  59       {
  60         var l = e.getTarget().getLabelObject();
  61         l.removeStyleProperty("textDecoration");
  62       };
  63
  64       function handleDragEnd(e)
  65       {
  66         vLastIndex = null;
  67         treeMarkerLine.setStyleProperty("display", "none");
  68       };
  69
  70       function handleDragMove(e)
  71       {
  72         vLastIndex = null;
  73
  74         var vTarget = e.getTarget();
  75
  76         if (!vTarget || !(vTarget instanceof qx.ui.tree.TreeFolder))
  77         {
  78           treeMarkerLine.setStyleProperty("display", "none");
  79           return;
  80         };
  81
  82         var vContainer = vTarget.getContainerObject();
  83
  84         if (!vContainer)
  85         {
  86           treeMarkerLine.setStyleProperty("display", "none");
  87           return;
  88         };
  89
  90         var vChildren = vContainer.getVisibleChildren();
  91         var vChildrenLength = vChildren.length;
  92         var vEventTop = e.getPageY();
  93
  94         for (var i=0, vChild, vTop; i<vChildrenLength; i++)
  95         {
  96           vChild = vChildren[i];
  97
  98           vTop = qx.dom.DomLocation.getPageBoxTop(vChild.getElement());
  99           if ((vTop - vEventTop) > -4 && (vTop - vEventTop) < 4)
 100           {
 101             if (vEventTop > vTop && vChild.isFirstChild()) {
 102               continue;
 103             };
 104
 105             treeMarkerLine._applyRuntimeTop(vTop+1);
 106             treeMarkerLine._applyRuntimeLeft(QxDom.getComputedPageBoxLeft(vChild.getLabelObject().getElement()) - 20);
 107
 108             treeMarkerLine.removeStyleProperty("display");
 109
 110             // this.debug("Index: " + vLastIndex + " :: " + vEventTop + " <> " + vTop);
 111             vLastIndex = vChild;
 112
 113             return;
 114           };
 115         };
 116
 117         treeMarkerLine.setStyleProperty("display", "none");
 118       };
 119
 120
 121
 122       var treeMarkerLine = new qx.ui.basic.Terminator;
 123
 124       treeMarkerLine.setHeight(2);
 125       treeMarkerLine.setBackgroundColor("#335EA8");
 126       treeMarkerLine.setWidth(20);
 127       treeMarkerLine.setZIndex(1e7);
 128       treeMarkerLine.setAnonymous(true);
 129       treeMarkerLine.setStyleProperty("display", "none");
 130
 131       qx.ui.core.ClientDocument.getInstance().add(treeMarkerLine);
 132
 133
 134
 135       var treeSource = new qx.ui.tree.Tree("Source");
 136
 137       with(treeSource)
 138       {
 139         setBackgroundColor(255);
 140         setBorder(qx.renderer.border.BorderPresets.getInstance().thinInset);
 141         setOverflow("scrollY");
 142
 143         setHeight(null);
 144         setTop(48);
 145         setLeft(20);
 146         setWidth(200);
 147         setBottom(48);
 148
 149         addEventListener("dragdrop", handleDragDrop);
 150         addEventListener("dragover", handleDragOver);
 151         addEventListener("dragout", handleDragOut);
 152         addEventListener("dragmove", handleDragMove);
 153
 154         setDropDataTypes(["qx.ui.tree.AbstractTreeElement"]);
 155       };
 156
 157       qx.ui.core.ClientDocument.getInstance().add(treeSource);
 158
 159       for (var i=1, f; i<3; i++)
 160       {
 161         f = new qx.ui.tree.TreeFolder("Folder " + i);
 162
 163         f.addEventListener("dragstart", handleDragStart);
 164         f.addEventListener("dragdrop", handleDragDrop);
 165         f.addEventListener("dragover", handleDragOver);
 166         f.addEventListener("dragout", handleDragOut);
 167         f.addEventListener("dragend", handleDragEnd);
 168
 169         f.setDropDataTypes(["qx.ui.tree.AbstractTreeElement"]);
 170         f.supportsDrop = supportsDrop;
 171
 172         treeSource.add(f);
 173
 174         for (var j=1, g; j<6; j++)
 175         {
 176           g = new qx.ui.tree.TreeFolder("Subfolder " + j);
 177
 178           g.addEventListener("dragstart", handleDragStart);
 179           g.addEventListener("dragdrop", handleDragDrop);
 180           g.addEventListener("dragover", handleDragOver);
 181           g.addEventListener("dragout", handleDragOut);
 182           g.addEventListener("dragend", handleDragEnd);
 183
 184           g.setDropDataTypes(["qx.ui.tree.AbstractTreeElement"]);
 185           g.supportsDrop = supportsDrop;
 186
 187           f.add(g);
 188
 189           for (var k=1, h; k<9; k++)
 190           {
 191             h = new qx.ui.tree.TreeFile("File " + k);
 192
 193             h.addEventListener("dragstart", handleDragStart);
 194
 195             g.add(h);
 196           };
 197         };
 198       };
 199
 200
 201
 202
 203
 204
 205       var treeDest = new qx.ui.tree.Tree("Dest");
 206
 207       with(treeDest)
 208       {
 209         setBackgroundColor(255);
 210         setBorder(qx.renderer.border.BorderPresets.getInstance().thinInset);
 211         setOverflow("scrollY");
 212
 213         setHeight(null);
 214         setTop(48);
 215         setLeft(240);
 216         setWidth(200);
 217         setBottom(48);
 218
 219         addEventListener("dragdrop", handleDragDrop);
 220         addEventListener("dragover", handleDragOver);
 221         addEventListener("dragout", handleDragOut);
 222         addEventListener("dragmove", handleDragMove);
 223
 224         setDropDataTypes(["qx.ui.tree.AbstractTreeElement"]);
 225       };
 226
 227       qx.ui.core.ClientDocument.getInstance().add(treeDest);
 228     });
 229   </script>
 230 </body>
 231 </html>