Ticket #3740: draggable_offset_bug.htm

File draggable_offset_bug.htm, 2.0 KB (added by satch, 10 years ago)
Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head>
4    <title>Draggable Offset Bug</title>
5
6    <script src="http://www.google.com/jsapi" type="text/javascript"></script>
7
8    <script type="text/javascript">
9        google.load("jquery", "1.3.2");
10        google.load("jqueryui", "1.7.2");
11    </script>
12
13    <style>
14        body
15        {
16            background: #aaa;
17            font-size: 0.66em;
18            font-family: Verdana,Arial,sans-serif;
19            line-height: 1.6em;
20            margin: 0;
21        }
22        #page
23        {
24            width: 620px;
25            margin: 20px auto;
26        }
27        #wrapper
28        {
29            background: #fff;
30            padding: 25px;
31            overflow: auto;
32        }
33        div.empty, div.draggable, div.droppable
34        {
35            float: left;
36            width: 240px;
37            height: 40px;
38            margin: 10px;
39            padding: 5px;
40        }
41        div.draggable, div.droppable
42        {
43            border: solid 1px #aaa;
44        }
45    </style>
46</head>
47<body>
48    <div id="page">
49        <div id="wrapper">
50            <div class="droppable">
51                <span>Target</span>
52            </div>
53            <div class="draggable">
54                <span>Source #1</span>
55            </div>
56            <div class="droppable">
57                <span>Target</span>
58            </div>
59            <div class="draggable">
60                <span>Source #2</span>
61            </div>
62        </div>
63    </div>
64
65    <script type="text/javascript">
66
67        $(function() {
68            $(".draggable").draggable({
69                axis: 'x',
70                revert: true,
71                helper: 'clone'
72            });
73            $(".droppable").droppable({
74            });
75        });
76       
77    </script>
78
79</body>
80</html>