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>
|
---|