diff options
Diffstat (limited to 'webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/test/DragAndDropManager_1.html')
| -rw-r--r-- | webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/test/DragAndDropManager_1.html | 131 |
1 files changed, 131 insertions, 0 deletions
diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/test/DragAndDropManager_1.html b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/test/DragAndDropManager_1.html new file mode 100644 index 0000000000..000c45aeb4 --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/test/DragAndDropManager_1.html @@ -0,0 +1,131 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » Demo</title> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/> + <!--[if IE]> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/> + <![endif]--> + <script type="text/javascript" src="../../script/qx.js"></script> +</head> +<body> + <script type="text/javascript" src="../../script/layout.js"></script> + + <div id="demoDescription"> + <p>Test for drag&drop implementation.</p> + <p>Changing the action using the modifier keys (Shift, Alt, Control) might not work in Safari.</p> + </div> + + <script type="text/javascript"> + qx.core.Init.getInstance().defineMain(function() + { + var d = qx.ui.core.ClientDocument.getInstance(); + + var a1 = new qx.ui.basic.Atom("Drag Me"); + a1.set({ backgroundColor: "white", border: qx.renderer.border.BorderPresets.getInstance().groove }); + a1.setPadding(10); + a1.setLocation(20, 48); + d.add(a1); + + + function handleDragStart(e) + { + e.addData("text/plain", "Plain text"); + e.addData("text/html", "Some <strong>HTML</strong>"); + + e.addAction("copy"); + e.addAction("move"); + e.addAction("alias"); + + e.startDrag(); + }; + + function handleDragDrop( e ) + { + var type = e.getDropDataTypes()[0]; + var data = e.getData(type); + + this.debug("Drag&Drop Action: " + e.getAction()); + + switch(type) + { + case "text/plain": + case "text/html": + this.setLabel(data); + break; + }; + }; + + function handleDragOver(e) { + e.getTarget().setBackgroundColor("#f2f2f2"); + }; + + function handleDragOut(e) { + e.getTarget().setBackgroundColor("#fff"); + }; + + function handleDragEnd(e) + { + // we don't need to do anything here + // If we had a succesful move action we might have removed + // the source here or something else + }; + + a1.addEventListener("dragstart", handleDragStart); + + + + + var w1 = new qx.ui.basic.Atom("Drop to me"); + w1.set({ backgroundColor: "white", border: qx.renderer.border.BorderPresets.getInstance().groove, width: 100, height: 100, top: 100, left: 20, horizontalAlign: "center" }); + w1.setDropDataTypes(["text/html", "text/plain"]); + w1.addEventListener("dragdrop", handleDragDrop); + w1.addEventListener("dragover", handleDragOver); + w1.addEventListener("dragout", handleDragOut); + + var w2 = new qx.ui.basic.Atom("Drop to me"); + w2.set({ backgroundColor: "white", border: qx.renderer.border.BorderPresets.getInstance().groove, width: 100, height: 100, top: 230, left: 20, horizontalAlign: "center" }); + w2.setDropDataTypes(["text/html", "text/plain"]); + w2.addEventListener("dragdrop", handleDragDrop); + w2.addEventListener("dragover", handleDragOver); + w2.addEventListener("dragout", handleDragOut); + + var w3 = new qx.ui.basic.Atom("Drop to me"); + w3.set({ backgroundColor: "white", border: qx.renderer.border.BorderPresets.getInstance().groove, width: 100, height: 100, top: 100, left: 150, horizontalAlign: "center" }); + w3.setDropDataTypes(["text/html", "text/plain"]); + w3.addEventListener("dragdrop", handleDragDrop); + w3.addEventListener("dragover", handleDragOver); + w3.addEventListener("dragout", handleDragOut); + + var w4 = new qx.ui.basic.Atom("Drop to me"); + w4.set({ backgroundColor: "white", border: qx.renderer.border.BorderPresets.getInstance().groove, width: 100, height: 100, top: 230, left: 150, horizontalAlign: "center" }); + w4.setDropDataTypes(["text/html", "text/plain"]); + w4.addEventListener("dragdrop", handleDragDrop); + w4.addEventListener("dragover", handleDragOver); + w4.addEventListener("dragout", handleDragOut); + + + + var f1 = new qx.ui.layout.CanvasLayout; + f1.set({ backgroundColor: "orange", width: 230, height: 120, top: 350, left: 20 }); + + var w5 = new qx.ui.basic.Atom("Drop to me"); + w5.set({ backgroundColor: "white", border: qx.renderer.border.BorderPresets.getInstance().groove, width: 100, height: 100, top: 10, horizontalAlign: "center" }); + w5.setDropDataTypes(["text/html", "text/plain"]); + w5.addEventListener("dragdrop", handleDragDrop); + w5.addEventListener("dragover", handleDragOver); + w5.addEventListener("dragout", handleDragOut); + + var w6 = new qx.ui.basic.Atom("Drop to me"); + w6.set({ backgroundColor: "white", border: qx.renderer.border.BorderPresets.getInstance().groove, width: 100, height: 100, top: 10, right: 0, horizontalAlign: "center" }); + w6.setDropDataTypes(["text/html", "text/plain"]); + w6.addEventListener("dragdrop", handleDragDrop); + w6.addEventListener("dragover", handleDragOver); + w6.addEventListener("dragout", handleDragOut); + + f1.add(w5, w6); + d.add(w1, w2, w3, w4, f1); + }); + </script> +</body> +</html>
\ No newline at end of file |