1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
|
<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>
</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 printEvent(e) {
return "TARGET:" + (e.getTarget() ? e.getTarget().toHashCode() : "null") + " [ORIG:" + (e.getOriginalTarget() ? e.getOriginalTarget().toHashCode() : "null") + "] [REL:" + (e.getRelatedTarget() ? e.getRelatedTarget().toHashCode() : "null") + "]";
};
function handleDragStart(e)
{
this.debug("Fire DragStart: " + printEvent(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 )
{
this.debug("Fire DragDrop: " + printEvent(e));
var type = e.getDropDataTypes()[0];
var data = e.getData(type);
switch(type)
{
case "text/plain":
case "text/html":
this.setLabel(data);
break;
};
};
function handleDragOver(e)
{
this.debug("Fire DragOver: " + printEvent(e));
e.getTarget().setBackgroundColor("#f2f2f2");
};
function handleDragOut(e)
{
this.debug("Fire DragOut: " + printEvent(e));
e.getTarget().setBackgroundColor("#fff");
};
function handleDragEnd(e) {
this.debug("Fire DragEnd: " + printEvent(e));
};
a1.addEventListener("dragstart", handleDragStart);
a1.addEventListener("dragend", handleDragEnd);
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: 200, 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: 200, left: 150, horizontalAlign: "center" });
w4.setDropDataTypes(["text/html", "text/plain"]);
w4.addEventListener("dragdrop", handleDragDrop);
w4.addEventListener("dragover", handleDragOver);
w4.addEventListener("dragout", handleDragOut);
d.add(w1, w2, w3, w4);
});
</script>
</body>
</html>
|
