source: main/trunk/greenstone3/web/interfaces/oran/js/jquery-ui-1.8rc1/tests/visual/draggable/draggable.scroll.html@ 24245

Last change on this file since 24245 was 24245, checked in by sjb48, 13 years ago

Oran code for supporting format changes to document.
  • Property svn:executable set to *
File size: 4.2 KB
Line 
1<!doctype html>
2<html lang="en">
3<head>
4 <title>Draggable Scroll Tests</title>
5 <link rel="stylesheet" href="../all.css" type="text/css">
6 <link rel="stylesheet" href="../../../themes/base/ui.all.css" type="text/css">
7 <script type="text/javascript" src="../../../jquery-1.4.1.js"></script>
8 <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
9 <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
10 <script type="text/javascript" src="../../../ui/jquery.ui.mouse.js"></script>
11 <script type="text/javascript" src="../../../ui/jquery.ui.draggable.js"></script>
12 <script type="text/javascript" src="../../../ui/jquery.ui.sortable.js"></script>
13 <style type="text/css">
14 .draggable {
15 width:100px;
16 height:100px;
17 background-color:green;
18 color: #fff;
19 padding: 5px;
20 margin: 5px;
21 border: 5px solid red;
22 }
23 .container {
24 width: 500px;
25 height: 200px;
26 border: 5px solid black;
27 padding: 5px;
28 margin: 5px;
29 float: left;
30 background: #fff;
31 }
32 .enlarge {
33 width: 1000px;
34 height: 1000px;
35 }
36 </style>
37 <script type="text/javascript">
38 $(function(){
39 $(".draggable").draggable({
40 //helper: 'clone',
41 drag: function(e, ui) {
42 //console.log(ui.helper.offset());
43 },
44 scroll:true
45 //containment:"parent"
46 });
47 });
48 </script>
49</head>
50<body>
51
52<div class='draggable' style='z-index: 1000;'>Simple draggable</div>
53<br clear='both' />
54
55
56<div class='container' style="overflow:scroll;">
57 <div class='draggable'>(Broken in IE)</div>
58 <div class='enlarge'></div>
59</div>
60
61<div class='container' style="overflow:scroll; position: relative;">
62 <div class='draggable'></div>
63 <div class='enlarge'></div>
64</div>
65
66<div class='container' style="overflow:scroll;">
67 <div class='draggable' style='position: absolute;top:0px;left:1000px;'>Absolute</div>
68 <div class='enlarge'></div>
69</div>
70
71<div class='container' style="overflow:scroll; position: relative;">
72 <div class='draggable' style='position: absolute;'>Absolute</div>
73 <div class='enlarge'></div>
74</div>
75
76<div class='container' style="overflow:scroll;">
77 <div class='draggable' style='position: fixed;'>Fixed</div>
78 <div class='enlarge'></div>
79</div>
80
81<div class='container' style="overflow:scroll; position: relative;">
82 <div class='draggable' style='position: fixed;'>Fixed</div>
83 <div class='enlarge'></div>
84</div>
85
86<!-- Relative draggable with two containers -->
87
88<div class='container' style="overflow:scroll; position: relative;">
89 <div class='container'>
90 <div class='draggable'>Relative</div>
91 <div class='enlarge'></div>
92 </div>
93
94</div>
95
96<div class='container' style="overflow:scroll; position: relative;">
97 <div class='container' style='position: relative;'>
98 <div class='draggable'>Relative</div>
99 <div class='enlarge'></div>
100 </div>
101</div>
102
103<div class='container' style="position: relative;">
104 <div class='container' style='overflow: scroll;'>
105 <div class='draggable'>Relative (Broken in IE)</div>
106 <div class='enlarge'></div>
107 </div>
108
109</div>
110
111<div class='container' style="position: relative;">
112 <div class='container' style='position: relative; overflow: scroll;'>
113 <div class='draggable'>Relative</div>
114 <div class='enlarge'></div>
115 </div>
116</div>
117
118<!-- Absolute draggable with two containers -->
119
120<div class='container' style="overflow:scroll; position: relative;">
121 <div class='container'>
122 <div class='draggable' style='position: absolute;'>Absolute</div>
123 <div class='enlarge'></div>
124 </div>
125
126</div>
127
128<div class='container' style="overflow:scroll; position: relative;">
129 <div class='container' style='position: relative;'>
130 <div class='draggable' style='position: absolute;'>Absolute</div>
131 <div class='enlarge'></div>
132 </div>
133</div>
134
135<div class='container' style="position: relative;">
136 <div class='container' style='overflow: scroll;'>
137 <div class='draggable' style='position: absolute;top:0px;left:0px;'>Absolute</div>
138 <div class='enlarge'></div>
139 </div>
140
141</div>
142
143<div class='container' style="position: relative;">
144 <div class='container' style='position: relative; overflow: scroll;'>
145 <div class='draggable' style='position: absolute;'>Absolute</div>
146 <div class='enlarge'></div>
147 </div>
148</div>
149
150</body>
151</html>
Note: See TracBrowser for help on using the repository browser.