swat.obsolete/apps/qooxdoo-examples/test/Tree_5.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   </div>
  17
  18   <script type="text/javascript">
  19     qx.core.Init.getInstance().defineMain(function()
  20     {
  21       function handleDragStart(e)
  22       {
  23         e.addData("qx.ui.tree.AbstractTreeElement", e.getCurrentTarget());
  24         e.addAction("move");
  25         e.startDrag();
  26       };
  27
  28       function handleDragDrop(e)
  29       {
  30         var vType = e.getDropDataTypes()[0];
  31         var vSource = e.getData(vType);
  32         var vTarget = e.getCurrentTarget();
  33
  34         vSource.getTree().getManager().deselectAll();
  35         vTarget.add(vSource);
  36
  37         e.stopPropagation();
  38       };
  39
  40       function supportsDrop(vDragCache) {
  41         return !vDragCache.sourceWidget.contains(this);
  42       };
  43
  44       function handleDragOver(e)
  45       {
  46         var l = e.getTarget().getLabelObject();
  47         l.setStyleProperty("textDecoration", "underline");
  48       };
  49
  50       function handleDragOut(e)
  51       {
  52         var l = e.getTarget().getLabelObject();
  53         l.removeStyleProperty("textDecoration");
  54       };
  55
  56
  57
  58       var treeSource = new qx.ui.tree.Tree("Source");
  59
  60       with(treeSource)
  61       {
  62         setBackgroundColor(255);
  63         setBorder(qx.renderer.border.BorderPresets.getInstance().thinInset);
  64         setOverflow("scrollY");
  65
  66         setHeight(null);
  67         setTop(48);
  68         setLeft(20);
  69         setWidth(200);
  70         setBottom(48);
  71
  72         addEventListener("dragdrop", handleDragDrop);
  73         addEventListener("dragover", handleDragOver);
  74         addEventListener("dragout", handleDragOut);
  75
  76         setDropDataTypes(["qx.ui.tree.AbstractTreeElement"]);
  77       };
  78
  79       qx.ui.core.ClientDocument.getInstance().add(treeSource);
  80
  81       for (var i=1, f; i<4; i++)
  82       {
  83         f = new qx.ui.tree.TreeFolder("Folder " + i);
  84
  85         f.addEventListener("dragstart", handleDragStart);
  86         f.addEventListener("dragdrop", handleDragDrop);
  87         f.addEventListener("dragover", handleDragOver);
  88         f.addEventListener("dragout", handleDragOut);
  89
  90         f.setDropDataTypes(["qx.ui.tree.AbstractTreeElement"]);
  91         f.supportsDrop = supportsDrop;
  92
  93         treeSource.add(f);
  94
  95         for (var j=1, g; j<4; j++)
  96         {
  97           g = new qx.ui.tree.TreeFolder("Subfolder " + j);
  98
  99           g.addEventListener("dragstart", handleDragStart);
 100           g.addEventListener("dragdrop", handleDragDrop);
 101           g.addEventListener("dragover", handleDragOver);
 102           g.addEventListener("dragout", handleDragOut);
 103
 104           g.setDropDataTypes(["qx.ui.tree.AbstractTreeElement"]);
 105           g.supportsDrop = supportsDrop;
 106
 107           f.add(g);
 108
 109           for (var k=1, h; k<4; k++)
 110           {
 111             h = new qx.ui.tree.TreeFile("File " + k);
 112
 113             h.addEventListener("dragstart", handleDragStart);
 114
 115             g.add(h);
 116           };
 117         };
 118       };
 119
 120
 121
 122
 123       var treeDest = new qx.ui.tree.Tree("Dest");
 124
 125       with(treeDest)
 126       {
 127         setBackgroundColor(255);
 128         setBorder(qx.renderer.border.BorderPresets.getInstance().thinInset);
 129         setOverflow("scrollY");
 130
 131         setHeight(null);
 132         setTop(48);
 133         setLeft(240);
 134         setWidth(200);
 135         setBottom(48);
 136
 137         addEventListener("dragdrop", handleDragDrop);
 138         addEventListener("dragover", handleDragOver);
 139         addEventListener("dragout", handleDragOut);
 140
 141         setDropDataTypes(["qx.ui.tree.AbstractTreeElement"]);
 142       };
 143
 144       qx.ui.core.ClientDocument.getInstance().add(treeDest);
 145     });
 146   </script>
 147 </body>
 148 </html>