swat/apps/qooxdoo-examples/test/DragAndDropManager_2.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>Test for drag&#38;drop implementation.</p>
  16   </div>
  17
  18   <script type="text/javascript">
  19   qx.core.Init.getInstance().defineMain(function()
  20   {
  21     var d = qx.ui.core.ClientDocument.getInstance();
  22
  23     var a1 = new qx.ui.basic.Atom("Drag Me");
  24     a1.set({ backgroundColor: "white", border: qx.renderer.border.BorderPresets.getInstance().groove });
  25     a1.setPadding(10);
  26     a1.setLocation(20, 48);
  27     d.add(a1);
  28
  29
  30
  31
  32     function printEvent(e) {
  33       return "TARGET:" + (e.getTarget() ? e.getTarget().toHashCode() : "null") + " [ORIG:" + (e.getOriginalTarget() ? e.getOriginalTarget().toHashCode() : "null") + "]  [REL:" + (e.getRelatedTarget() ? e.getRelatedTarget().toHashCode() : "null") + "]";
  34     };
  35
  36     function handleDragStart(e)
  37     {
  38       this.debug("Fire DragStart: " + printEvent(e));
  39
  40       e.addData("text/plain", "Plain text");
  41       e.addData("text/html", "Some <strong>HTML</strong>");
  42
  43       e.addAction("copy");
  44       e.addAction("move");
  45       e.addAction("alias");
  46
  47       e.startDrag();
  48     };
  49
  50     function handleDragDrop( e )
  51     {
  52       this.debug("Fire DragDrop: " + printEvent(e));
  53
  54       var type = e.getDropDataTypes()[0];
  55       var data = e.getData(type);
  56
  57       switch(type)
  58       {
  59         case "text/plain":
  60         case "text/html":
  61           this.setLabel(data);
  62           break;
  63       };
  64     };
  65
  66     function handleDragOver(e)
  67     {
  68       this.debug("Fire DragOver: " + printEvent(e));
  69       e.getTarget().setBackgroundColor("#f2f2f2");
  70     };
  71
  72     function handleDragOut(e)
  73     {
  74       this.debug("Fire DragOut: " + printEvent(e));
  75       e.getTarget().setBackgroundColor("#fff");
  76     };
  77
  78     function handleDragEnd(e) {
  79       this.debug("Fire DragEnd: " + printEvent(e));
  80     };
  81
  82
  83
  84
  85     a1.addEventListener("dragstart", handleDragStart);
  86     a1.addEventListener("dragend", handleDragEnd);
  87
  88
  89
  90
  91     var w1 = new qx.ui.basic.Atom("Drop to me");
  92     w1.set({ backgroundColor: "white", border: qx.renderer.border.BorderPresets.getInstance().groove, width: 100, height: 100, top: 100, left: 20, horizontalAlign: "center" });
  93     w1.setDropDataTypes(["text/html", "text/plain"]);
  94     w1.addEventListener("dragdrop", handleDragDrop);
  95     w1.addEventListener("dragover", handleDragOver);
  96     w1.addEventListener("dragout", handleDragOut);
  97
  98     var w2 = new qx.ui.basic.Atom("Drop to me");
  99     w2.set({ backgroundColor: "white", border: qx.renderer.border.BorderPresets.getInstance().groove, width: 100, height: 100, top: 200, left: 20, horizontalAlign: "center" });
 100     w2.setDropDataTypes(["text/html", "text/plain"]);
 101     w2.addEventListener("dragdrop", handleDragDrop);
 102     w2.addEventListener("dragover", handleDragOver);
 103     w2.addEventListener("dragout", handleDragOut);
 104
 105     var w3 = new qx.ui.basic.Atom("Drop to me");
 106     w3.set({ backgroundColor: "white", border: qx.renderer.border.BorderPresets.getInstance().groove, width: 100, height: 100, top: 100, left: 150, horizontalAlign: "center" });
 107     w3.setDropDataTypes(["text/html", "text/plain"]);
 108     w3.addEventListener("dragdrop", handleDragDrop);
 109     w3.addEventListener("dragover", handleDragOver);
 110     w3.addEventListener("dragout", handleDragOut);
 111
 112     var w4 = new qx.ui.basic.Atom("Drop to me");
 113     w4.set({ backgroundColor: "white", border: qx.renderer.border.BorderPresets.getInstance().groove, width: 100, height: 100, top: 200, left: 150, horizontalAlign: "center" });
 114     w4.setDropDataTypes(["text/html", "text/plain"]);
 115     w4.addEventListener("dragdrop", handleDragDrop);
 116     w4.addEventListener("dragover", handleDragOver);
 117     w4.addEventListener("dragout", handleDragOut);
 118
 119     d.add(w1, w2, w3, w4);
 120   });
 121   </script>
 122 </body>
 123 </html>