思洋互动网站建设学前班

在线演示 本地下载

今天我们介绍HTML5的拖拽功能。基本目前所有的现代浏览器(Firefox，Chrome，Safari，或者Opera)都支持这个实用的功能。这意味着我们可以考虑在我们的项目和网站中使用这个功能。更重要的是代码编写非常简单。我们这里将使用拖拽API开发一个图片的分组排序功能 ，希望能够给大家比较直观的使用感受。希望大家喜欢！
广州网站建设,网站建设,广州网页设计,广州网站设计

HTML标签

1. <div> 
2.     <div id="drop_1" droppable="true"><h2>Album 1</h2></div> 
3.     <div id="drop_2" droppable="true"><h2>Album 1</h2></div> 
4.     <div id="drop_3" droppable="true"><h2>Album 3</h2></div> 
5. </div> 
6. <div style="clear:both"></div> 
7. <div> 
8.     <a id="1" draggable="true"><img src="images/1.jpg"></a> 
9.     <a id="2" draggable="true"><img src="images/2.jpg"></a> 
10.     <a id="3" draggable="true"><img src="images/3.jpg"></a> 
11.     <a id="4" draggable="true"><img src="images/4.jpg"></a> 
12.     <a id="5" draggable="true"><img src="images/5.jpg"></a> 
13.     <a id="6" draggable="true"><img src="images/6.jpg"></a> 
14.     <a id="7" draggable="true"><img src="images/7.jpg"></a> 
15.     <a id="8" draggable="true"><img src="images/8.jpg"></a> 
16.     <a id="9" draggable="true"><img src="images/9.jpg"></a> 
17.     <a id="10" draggable="true"><img src="images/10.jpg"></a> 
18.     <a id="11" draggable="true"><img src="images/11.jpg"></a> 
19.     <a id="12" draggable="true"><img src="images/12.jpg"></a> 
20. </div> 
21. <script src="js/main.js"></script> 

你可以看到这里我们设定了3个开放的drop对象和12个图片。我们将可drop的区域使用属性droppable来标示，并且将可drag的对象用draggable来标示。

CSS代码

接下来我们设置页面的样式。

1. /* Photo Gallery styles */ 
2. .gallery {  
3.     margin: 50px auto 0;  
4.     width: 840px;  
5. }  
6. .gallery a {  
7.     display: inline-block;  
8.     height: 135px;  
9.     margin: 10px;  
10.     opacity: 1;  
11.     position: relative;  
12.     width: 180px;  
13.  
14.     -khtml-user-drag: element;  
15.  
16.     /* CSS3 Prevent selections */ 
17.     -moz-user-select: none;  
18.     -webkit-user-select: none;  
19.     -khtml-user-select: none;  
20.     user-select: none;  
21.  
22.     /* CSS3 transition rules */ 
23.     -webkit-transition: all 0.5s ease;  
24.     -moz-transition: all 0.5s ease;  
25.     -o-transition: all 0.5s ease;  
26.     transition: all 0.5s ease;  
27. }  
28. .gallery a img {  
29.     border: 8px solid #fff;  
30.     border-bottom: 20px solid #fff;  
31.     cursor: pointer;  
32.     display: block;  
33.     height: 100%;  
34.     left: 0px;  
35.     position: absolute;  
36.     top: 0px;  
37.     width: 100%;  
38.     z-index: 1;  
39.  
40.     /* CSS3 Box sizing property */ 
41.     -moz-box-sizing: border-box;  
42.     -webkit-box-sizing: border-box;  
43.     -o-box-sizing: border-box;  
44.     box-sizing: border-box;  
45.  
46.     /* CSS3 transition rules */ 
47.     -webkit-transition: all 0.5s ease;  
48.     -moz-transition: all 0.5s ease;  
49.     -o-transition: all 0.5s ease;  
50.     transition: all 0.5s ease;  
51.  
52.     /* CSS3 Box Shadow */ 
53.     -moz-box-shadow: 2px 2px 4px #444;  
54.     -webkit-box-shadow: 2px 2px 4px #444;  
55.     -o-box-shadow: 2px 2px 4px #444;  
56.     box-shadow: 2px 2px 4px #444;  
57. }  
58.  
59. /* Custom CSS3 rotate transformation */ 
60. .gallery a:nth-child(1) img {  
61.     -moz-transform: rotate(-25deg);  
62.     -webkit-transform: rotate(-25deg);  
63.     transform: rotate(-25deg);  
64. }  
65. .gallery a:nth-child(2) img {  
66.     -moz-transform: rotate(-20deg);  
67.     -webkit-transform: rotate(-20deg);  
68.     transform: rotate(-20deg);  
69. }  
70. .gallery a:nth-child(3) img {  
71.     -moz-transform: rotate(-15deg);  
72.     -webkit-transform: rotate(-15deg);  
73.     transform: rotate(-15deg);  
74. }  
75. .gallery a:nth-child(4) img {  
76.     -moz-transform: rotate(-10deg);  
77.     -webkit-transform: rotate(-10deg);  
78.     transform: rotate(-10deg);  
79. }  
80. .gallery a:nth-child(5) img {  
81.     -moz-transform: rotate(-5deg);  
82.     -webkit-transform: rotate(-5deg);  
83.     transform: rotate(-5deg);  
84. }  
85. .gallery a:nth-child(6) img {  
86.     -moz-transform: rotate(0deg);  
87.     -webkit-transform: rotate(0deg);  
88.     transform: rotate(0deg);  
89. }  
90. .gallery a:nth-child(7) img {  
91.     -moz-transform: rotate(5deg);  
92.     -webkit-transform: rotate(5deg);  
93.     transform: rotate(5deg);  
94. }  
95. .gallery a:nth-child(8) img {  
96.     -moz-transform: rotate(10deg);  
97.     -webkit-transform: rotate(10deg);  
98.     transform: rotate(10deg);  
99. }  
100. .gallery a:nth-child(9) img {  
101.     -moz-transform: rotate(15deg);  
102.     -webkit-transform: rotate(15deg);  
103.     transform: rotate(15deg);  
104. }  
105. .gallery a:nth-child(10) img {  
106.     -moz-transform: rotate(20deg);  
107.     -webkit-transform: rotate(20deg);  
108.     transform: rotate(20deg);  
109. }  
110. .gallery a:nth-child(11) img {  
111.     -moz-transform: rotate(25deg);  
112.     -webkit-transform: rotate(25deg);  
113.     transform: rotate(25deg);  
114. }  
115. .gallery a:nth-child(12) img {  
116.     -moz-transform: rotate(30deg);  
117.     -webkit-transform: rotate(30deg);  
118.     transform: rotate(30deg);  
119. }  
120. .gallery a:hover img {  
121.     z-index: 5;  
122.  
123.     /* CSS3 transition rules */ 
124.     -webkit-transition: all 0.5s ease;  
125.     -moz-transition: all 0.5s ease;  
126.     -o-transition: all 0.5s ease;  
127.     transition: all 0.5s ease;  
128.  
129.     /* CSS3 transform rules */ 
130.     -moz-transform: rotate(0deg);  
131.     -webkit-transform: rotate(0deg);  
132.     -o-transform: rotate(0deg);  
133.     transform: rotate(0deg);  
134. }  
135. .gallery a.hidden {  
136.     height: 0;  
137.     margin: 0;  
138.     opacity: 0;  
139.     width: 0;  
140. }  
141. .albums {  
142.     margin: 40px auto 0;  
143.     overflow: hidden;  
144.     width: 840px;  
145. }  
146. .album {  
147.     border: 3px dashed #ccc;  
148.     float: left;  
149.     margin: 10px;  
150.     min-height: 100px;  
151.     padding: 10px;  
152.     width: 220px;  
153.  
154.     /* CSS3 transition rules */ 
155.     -webkit-transition: all 1.0s ease;  
156.     -moz-transition: all 1.0s ease;  
157.     -o-transition: all 1.0s ease;  
158.     transition: all 1.0s ease;  
159. }  
160. .album a {  
161.     display: inline-block;  
162.     height: 56px;  
163.     margin: 15px;  
164.     opacity: 1;  
165.     position: relative;  
166.     width: 75px;  
167.  
168.     -khtml-user-drag: element;  
169.     -webkit-user-drag: element;  
170.     -khtml-user-select: none;  
171.     -webkit-user-select: none;  
172.  
173.     /* CSS3 Prevent selections */ 
174.     -moz-user-select: none;  
175.     -webkit-user-select: none;  
176.     -khtml-user-select: none;  
177.     user-select: none;  
178.  
179.     /* CSS3 transition rules */ 
180.     -webkit-transition: all 0.5s ease;  
181.     -moz-transition: all 0.5s ease;  
182.     -o-transition: all 0.5s ease;  
183.     transition: all 0.5s ease;  
184. }  
185. .album a img {  
186.     border: 4px solid #fff;  
187.     border-bottom: 10px solid #fff;  
188.     cursor: pointer;  
189.     display: block;  
190.     height: 100%;  
191.     left: 0px;  
192.     position: absolute;  
193.     top: 0px;  
194.     width: 100%;  
195.     z-index: 1;  
196.  
197.     /* CSS3 Box sizing property */ 
198.     -moz-box-sizing: border-box;  
199.     -webkit-box-sizing: border-box;  
200.     -o-box-sizing: border-box;  
201.     box-sizing: border-box;  
202.  
203.     /* CSS3 transition rules */ 
204.     -webkit-transition: all 0.5s ease;  
205.     -moz-transition: all 0.5s ease;  
206.     -o-transition: all 0.5s ease;  
207.     transition: all 0.5s ease;  
208.  
209.     /* CSS3 Box Shadow */ 
210.     -moz-box-shadow: 2px 2px 4px #444;  
211.     -webkit-box-shadow: 2px 2px 4px #444;  
212.     -o-box-shadow: 2px 2px 4px #444;  
213.     box-shadow: 2px 2px 4px #444;  
214. }