Ticket #4483: fixed issue jquery.htm

File fixed issue jquery.htm, 9.4 KB (added by homer1980ar, 11 years ago)
Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
2  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
4<head>
5   <title>Abundant Closet - Home</title>
6   <link rel="stylesheet" type="text/css" href="/css/grids-min.css" />   
7   <script language="javascript" src="/js/jquery-1.3.2.min.js" type="text/javascript"></script>
8   <script language="javascript" src="/js/jquery-ui-1.7.1.custom.min.js" type="text/javascript"></script>
9   <link type="text/css" href="/css/redmond/jquery-ui-1.7.1.custom.css" rel="stylesheet" />     
10   <script language="javascript" type="text/javascript">
11   
12    $(document).ready(function() {
13                // there's the gallery and the trash
14                var $gallery = $('.tab-container').eq(0), $wishlist = $('#wishlist'), $excludelist = $('#excludelist');
15
16                // let the gallery items be draggable
17                $('div.item').draggable({
18                        cancel: 'a.ui-icon',// clicking an icon won't initiate dragging
19                        revert: 'invalid', // when not dropped, the item will revert back to its initial position
20                        containment: 'document', // stick to demo-frame if present
21                        opacity: 0.7,
22                        helper: cloneMe,
23                        cursor: 'auto'
24                });
25               
26                // let the trash be droppable, accepting the gallery items
27                $wishlist.droppable({
28                        accept: 'div.item',
29                        hoverClass: 'ui-state-highlight',
30                        tolerance: 'touch',
31                        drop: function(ev, ui) {
32                        }
33                });
34    });
35   
36    /* Clones the draggable item and sets a fixed width to correctly show on major browsers */
37        function cloneMe(ev) 
38        {
39            return $(this).clone().width("150px");
40        }
41    </script>
42    <style type"text/css">
43
44/*-------------------------------------
45STRUCTURE
46-------------------------------------*/
47
48body, html 
49{
50        background: #E3E7F2;
51        font-family:"Century Gothic";
52}
53
54div, a, span, td, dd
55{
56        font:'Century Gothic' 12px;
57        color:#000;
58}
59
60#container {
61        width:1000px;
62        margin: 0 auto;
63        text-align:left;
64        background:#FFF;
65}
66
67#container #right 
68{
69        width:222px;
70        float:right;
71}
72
73#container #left 
74{
75        width:764px;
76        padding:5px 6px 0 3px;
77        background: #fff url(/img/bg_cont_right.png) right repeat-y;
78}
79
80.cont-twocol
81{
82        background-color:#AAB8D3;
83}
84
85
86        .dropzone 
87        {
88                width: 180px; 
89                padding: 1%;
90        }
91
92        #wishlist 
93        {
94                position:fixed;
95                top:30px;
96        }
97
98        #excludelist 
99        {
100                position:fixed;
101                bottom:30px;
102        }
103
104        .dropzone .container 
105        {
106                overflow:auto; 
107                height: 100px; 
108                margin: 5px 5px 14px 5px;
109                background: #fff;
110                border:1px solid #fff;
111        }
112
113        .dropzone .container h1
114        {
115                margin:2px;
116                padding:2px;
117                background: #CBD2DC;
118                color: #48608f;
119                font-size:11px;
120                font-family:Verdana;
121        }
122
123        .dropzone .bottom
124        {
125                position:absolute; 
126                bottom:3px; 
127                right: 3px; 
128                font-size:11px; 
129                font-family:Arial;
130        }
131
132        .dropzone 
133        {
134                background:#AAB8D3;
135                margin: 3px;
136                padding: 5px 0 5px 0;
137        }
138
139        .dropzone h4 
140        {
141                text-align:center;
142                font-size:16px;
143                color:#000;
144        }
145   
146    </style>
147</head>
148<body>
149
150<div id="container">
151    <div id="right">
152                        <div id="wishlist" class="dropzone"> 
153                                <h4>HERE</h4>
154                                <div class="container">
155                                </div>
156                                <span class="bottom">Drag your items here.</span>
157                        </div>     
158        </div>
159    <div id="left">
160        <div id="main">
161       
162            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
163            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
164            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
165            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
166            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
167            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
168            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
169            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
170            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
171            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
172            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
173            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
174            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
175            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
176            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
177            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
178            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
179            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
180            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
181            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
182            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
183            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
184            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
185            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
186            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
187            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
188            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
189            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
190            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
191            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
192            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
193            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
194            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
195            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
196            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
197            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
198            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
199            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
200            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
201            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
202            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
203            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
204            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
205            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
206            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
207            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
208            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
209            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
210            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
211            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
212            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
213            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
214            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
215            <div class="item" style="height:100px; width:100px; background:#ccc;margin:5px;">DRAG ME</div>
216           
217        </div>
218    </div>
219</div>
220
221</body>
222</html>