网页HTML图5片拖拽分组代码.docxVIP

今天我们介绍HTML5的拖拽功能。基本目前所有的现代浏览器(Firefox，Chrome，Safari，或者Opera)都支持这个实用的功能。这意味着我们可以考虑在我们的项目和网站中使用这个功能。更重要的是代码编写非常简单。我们这里将使用拖拽API开发一个图片的分组排序功能 ，希望能够给大家比较直观的使用感受。希望大家喜欢！(注，文章转自html5中文网)HTML标签div class=albums div class=album id=drop_1 droppable=trueh2Album 1/h2/div div class=album id=drop_2 droppable=trueh2Album 1/h2/div div class=album id=drop_3 droppable=trueh2Album 3/h2/div/divdiv style=clear:both/divdiv class=gallery a id=1 draggable=trueimg src=images/1.jpg/a a id=2 draggable=trueimg src=images/2.jpg/a a id=3 draggable=trueimg src=images/3.jpg/a a id=4 draggable=trueimg src=images/4.jpg/a a id=5 draggable=trueimg src=images/5.jpg/a a id=6 draggable=trueimg src=images/6.jpg/a a id=7 draggable=trueimg src=images/7.jpg/a a id=8 draggable=trueimg src=images/8.jpg/a a id=9 draggable=trueimg src=images/9.jpg/a a id=10 draggable=trueimg src=images/10.jpg/a a id=11 draggable=trueimg src=images/11.jpg/a a id=12 draggable=trueimg src=images/12.jpg/a/divscript src=js/main.js/script你可以看到这里我们设定了3个开放的drop对象和12个图片。我们将可drop的区域使用属性droppable来标示，并且将可drag的对象用draggable来标示。CSS代码接下来我们设置页面的样式。/* Photo Gallery styles */.gallery { margin: 50px auto 0; width: 840px;}.gallery a { display: inline-block; height: 135px; margin: 10px; opacity: 1; position: relative; width: 180px; -khtml-user-drag: element; /* CSS3 Prevent selections */ -moz-user-select: none; -webkit-user-select: none; -khtml-user-select: none; user-select: none; /* CSS3 transition rules */ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;}.gallery a img { border: 8px solid #fff; border-bottom: 20px solid #fff; cursor: pointer; display: block; height: 100%; left: 0px; position: absolute; top: 0px; width: 100%; z-index: 1; /* CSS3 Box sizing property */ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; /* CSS3 transition rules */ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-t