Bug Tracker

Ticket #3060: dragtest.htm

File dragtest.htm, 4.1 KB (added by SkeletonMan, 12 years ago)

Test case (same as the official draggables demo, but newer jquery)

Line 
1<html>
2<head>
3<meta http-equiv="Content-Language" content="en" />
4<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5<title>Draggables demo - Interface plugin for jQuery</title>
6        <script type="text/javascript" src="jquery-1.2.1.pack.js"></script>
7        <script type="text/javascript" src="iutil.js"></script>
8        <script type="text/javascript" src="idrag.js"></script>
9<style type="text/css" media="all">
10
11body
12{
13    background: #fff;
14    margin: 0;
15    padding: 0;
16    height: 100%;
17    font-family: Arial, Helvetica, sans-serif;
18    font-size: 10pt;
19}
20
21.draggable {
22    position: absolute;
23    width: 80px;
24    height: 40px;
25    border: 1px solid #0090DF;
26    background-color: #68BFEF;
27    padding: 10px;
28    text-align: center;
29}
30
31#parentElem
32{
33    width: 402px;
34    height: 160px;
35    background-color: #FFDFDF;
36    border: 10px solid #900;
37    padding: 20px;
38    top: 150px;
39    left: 0px;
40    position: absolute;
41    overflow: hidden;
42    margin: 10px;
43    color: #000;
44    border-left-width: 10px;
45}
46#insideParent
47{
48    width: 100px;
49    height: 100px;
50    background-color: #9c0;
51    color: #fff;
52}
53#drag1
54{
55    top: 10px;
56    left: 10px;
57}
58#drag2
59{
60    top: 10px;
61    left: 130px;
62}
63#drag3
64{
65    top: 10px;
66    left: 250px;
67}
68#drag4
69{
70    top: 10px;
71    left: 370px;
72}
73#drag5
74{
75    top: 80px;
76    left: 10px;
77}
78#drag6
79{
80    top: 80px;
81    left: 130px;
82}
83#drag7
84{
85    top: 80px;
86    left: 250px;
87}
88#drag7 div
89{
90    cursor: move;
91    background-color: #900;
92    height: 15px;
93}
94#drag8
95{
96    top: 80px;
97    left: 370px;
98}
99.frameClass
100{
101    border: 1px dotted #999;
102}
103</style>
104</head>
105<body>
106<div id="parentElem">border: 5px; padding: 5px; margin: 5px;<div id="insideParent">Drag me inside my parrent</div></div>
107<div id="drag1" class="draggable"><a href="index.php">Drag me</a></div>
108<div id="drag2" class="draggable">Ghostly</div>
109<div id="drag3" class="draggable">Revert</div>
110<div id="drag4" class="draggable">Moved by grid [50,50]</div>
111<div id="drag5" class="draggable">Moved only vertically</div>
112<div id="drag6" class="draggable">Moved only horizontally</div>
113<div id="drag7" class="draggable"><div></div>Drag by handle</div>
114<div id="drag8" class="draggable">with cursorAt</div>
115<script type="text/javascript">
116$(document).ready(
117    function()
118    {
119        $('#drag1').Draggable({snapDistance: 10, frameClass: 'frameClass'});
120        $('#drag2').Draggable(
121            {
122                ghosting:   true,
123                opacity:    0.5,
124                fx:         300
125            }
126        );
127        $('#drag3').Draggable(
128            {
129                revert:     true,
130                fx:         100
131            }
132        );
133        $('#drag4').Draggable(
134            {
135                grid:       [50,50]
136            }
137        );
138        $('#drag5').Draggable(
139            {
140                axis:   'vertically'
141            }
142        );
143        $('#drag6').Draggable(
144            {
145                axis:   'horizontally'
146            }
147        );
148        $('#drag7').Draggable(
149            {
150                handle: 'div'
151            }
152        );
153        $('#insideParent').Draggable(
154            {
155                zIndex:     1000,
156                ghosting:   false,
157                opacity:    0.7,
158                containment : 'parent'
159            }
160        );
161        $('#drag8').Draggable(
162            {
163                /* onDragModifier : function(x,y)
164                {
165                    var centerx = 600;
166                    var centery = 400;
167                    var angle = Math.atan((centery-y)/(centerx-x));
168                    if((centerx-x)>=0)
169                        angle += Math.PI;
170                    radius = 160;
171                    return {
172                        x: radius * Math.cos(angle) + centerx,
173                        y: radius * Math.sin(angle) + centery
174                    }
175                }
176                */
177                cursorAt: { top: -5, left: -5 }
178            }
179        );
180    }
181);
182</script>
183</body>
184</html>