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
124
125
126
127
128
129
130
131
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Dragged Element on Top</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/dragdrop/dragdrop-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
.dd-demo {
position:relative;
border:4px solid #666;
text-align:center;
color:#fff;
cursor:move;
height:60px;
width:60px;
}
.dd-demo-em {
border:4px solid purple;
}
#dd-demo-1 {
background-color:#6D739A;top:0px; left:0px;
}
#dd-demo-2 {
background-color:#566F4E;top:50px; left:100px;
}
#dd-demo-3 {
background-color:#7E5B60;top:-150px; left:200px;
}
</style>
<!--end custom header content for this example-->
</head>
<body class="yui-skin-sam">
<h1>Dragged Element on Top</h1>
<div class="exampleIntro">
<p>This example builds on the basic drag and drop, keeping the dragged element
on top of the others by changing its <code>z-index</code> property during the drag.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<div id="dd-demo-1" class="dd-demo"></div>
<div id="dd-demo-2" class="dd-demo"></div>
<div id="dd-demo-3" class="dd-demo"></div>
<script type="text/javascript">
// Our custom drag and drop implementation, extending YAHOO.util.DD
YAHOO.example.DDOnTop = function(id, sGroup, config) {
YAHOO.example.DDOnTop.superclass.constructor.apply(this, arguments);
};
YAHOO.extend(YAHOO.example.DDOnTop, YAHOO.util.DD, {
origZ: 0,
startDrag: function(x, y) {
YAHOO.log(this.id + " startDrag", "info", "example");
var style = this.getEl().style;
// store the original z-index
this.origZ = style.zIndex;
// The z-index needs to be set very high so the element will indeed be on top
style.zIndex = 999;
},
endDrag: function(e) {
YAHOO.log(this.id + " endDrag", "info", "example");
// restore the original z-index
this.getEl().style.zIndex = this.origZ;
}
});
</script>
<script type="text/javascript">
(function() {
var dd, dd2, dd3;
YAHOO.util.Event.onDOMReady(function() {
dd = new YAHOO.example.DDOnTop("dd-demo-1");
dd2 = new YAHOO.example.DDOnTop("dd-demo-2");
dd3 = new YAHOO.example.DDOnTop("dd-demo-3");
});
})();
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>
|
