今天我们介绍HTML5的拖拽功能。基本目前所有的现代浏览器(Firefox,Chrome,Safari,或者Opera)都支持这个实用的功能。这意味着我们可以考虑在我们的项目和网站中使用这个功能。更重要的是代码编写非常简单。我们这里将使用拖拽API开发一个图片的分组排序功能 ,希望能够给大家比较直观的使用感受。希望大家喜欢!
HTML标签
- <div>
- <div id="drop_1" droppable="true"><h2>Album 1</h2></div>
- <div id="drop_2" droppable="true"><h2>Album 1</h2></div>
- <div id="drop_3" droppable="true"><h2>Album 3</h2></div>
- </div>
- <div style="clear:both"></div>
- <div>
- <a id="1" draggable="true"><img src="images/1.jpg"></a>
- <a id="2" draggable="true"><img src="images/2.jpg"></a>
- <a id="3" draggable="true"><img src="images/3.jpg"></a>
- <a id="4" draggable="true"><img src="images/4.jpg"></a>
- <a id="5" draggable="true"><img src="images/5.jpg"></a>
- <a id="6" draggable="true"><img src="images/6.jpg"></a>
- <a id="7" draggable="true"><img src="images/7.jpg"></a>
- <a id="8" draggable="true"><img src="images/8.jpg"></a>
- <a id="9" draggable="true"><img src="images/9.jpg"></a>
- <a id="10" draggable="true"><img src="images/10.jpg"></a>
- <a id="11" draggable="true"><img src="images/11.jpg"></a>
- <a id="12" draggable="true"><img src="images/12.jpg"></a>
- </div>
- <script 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-transition: all 0.5s ease;
- transition: all 0.5s ease;
- /* CSS3 Box Shadow */
- -moz-box-shadow: 2px 2px 4px #444;
- -webkit-box-shadow: 2px 2px 4px #444;
- -o-box-shadow: 2px 2px 4px #444;
- box-shadow: 2px 2px 4px #444;
- }
- /* Custom CSS3 rotate transformation */
- .gallery a:nth-child(1) img {
- -moz-transform: rotate(-25deg);
- -webkit-transform: rotate(-25deg);
- transform: rotate(-25deg);
- }
- .gallery a:nth-child(2) img {
- -moz-transform: rotate(-20deg);
- -webkit-transform: rotate(-20deg);
- transform: rotate(-20deg);
- }
- .gallery a:nth-child(3) img {
- -moz-transform: rotate(-15deg);
- -webkit-transform: rotate(-15deg);
- transform: rotate(-15deg);
- }
- .gallery a:nth-child(4) img {
- -moz-transform: rotate(-10deg);
- -webkit-transform: rotate(-10deg);
- transform: rotate(-10deg);
- }
- .gallery a:nth-child(5) img {
- -moz-transform: rotate(-5deg);
- -webkit-transform: rotate(-5deg);
- transform: rotate(-5deg);
- }
- .gallery a:nth-child(6) img {
- -moz-transform: rotate(0deg);
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- .gallery a:nth-child(7) img {
- -moz-transform: rotate(5deg);
- -webkit-transform: rotate(5deg);
- transform: rotate(5deg);
- }
- .gallery a:nth-child(8) img {
- -moz-transform: rotate(10deg);
- -webkit-transform: rotate(10deg);
- transform: rotate(10deg);
- }
- .gallery a:nth-child(9) img {
- -moz-transform: rotate(15deg);
- -webkit-transform: rotate(15deg);
- transform: rotate(15deg);
- }
- .gallery a:nth-child(10) img {
- -moz-transform: rotate(20deg);
- -webkit-transform: rotate(20deg);
- transform: rotate(20deg);
- }
- .gallery a:nth-child(11) img {
- -moz-transform: rotate(25deg);
- -webkit-transform: rotate(25deg);
- transform: rotate(25deg);
- }
- .gallery a:nth-child(12) img {
- -moz-transform: rotate(30deg);
- -webkit-transform: rotate(30deg);
- transform: rotate(30deg);
- }
- .gallery a:hover img {
- z-index: 5;
- /* 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;
- /* CSS3 transform rules */
- -moz-transform: rotate(0deg);
- -webkit-transform: rotate(0deg);
- -o-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- .gallery a.hidden {
- height: 0;
- margin: 0;
- opacity: 0;
- width: 0;
- }
- .albums {
- margin: 40px auto 0;
- overflow: hidden;
- width: 840px;
- }
- .album {
- border: 3px dashed #ccc;
- float: left;
- margin: 10px;
- min-height: 100px;
- padding: 10px;
- width: 220px;
- /* CSS3 transition rules */
- -webkit-transition: all 1.0s ease;
- -moz-transition: all 1.0s ease;
- -o-transition: all 1.0s ease;
- transition: all 1.0s ease;
- }
- .album a {
- display: inline-block;
- height: 56px;
- margin: 15px;
- opacity: 1;
- position: relative;
- width: 75px;
- -khtml-user-drag: element;
- -webkit-user-drag: element;
- -khtml-user-select: none;
- -webkit-user-select: none;
- /* 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;
- }
- .album a img {
- border: 4px solid #fff;
- border-bottom: 10px 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-transition: all 0.5s ease;
- transition: all 0.5s ease;
- /* CSS3 Box Shadow */
- -moz-box-shadow: 2px 2px 4px #444;
- -webkit-box-shadow: 2px 2px 4px #444;
- -o-box-shadow: 2px 2px 4px #444;
- box-shadow: 2px 2px 4px #444;
- }
#p#
Javascript代码
- // add event handler
- var addEvent = (function () {
- if (document.addEventListener) {
- return function (el, type, fn) {
- if (el && el.nodeName || el === window) {
- el.addEventListener(type, fn, false);
- } else if (el && el.length) {
- for (var i = 0; i < el.length; i++) {
- addEvent(el[i], type, fn);
- }
- }
- };
- } else {
- return function (el, type, fn) {
- if (el && el.nodeName || el === window) {
- el.attachEvent('on' + type, function () { return fn.call(el, window.event); });
- } else if (el && el.length) {
- for (var i = 0; i < el.length; i++) {
- addEvent(el[i], type, fn);
- }
- }
- };
- }
- })();
- // inner variables
- var dragItems;
- updateDataTransfer();
- var dropAreas = document.querySelectorAll('[droppable=true]');
- // preventDefault (stops the browser from redirecting off to the text)
- function cancel(e) {
- if (e.preventDefault) {
- e.preventDefault();
- }
- return false;
- }
- // update event handlers
- function updateDataTransfer() {
- dragItems = document.querySelectorAll('[draggable=true]');
- for (var i = 0; i < dragItems.length; i++) {
- addEvent(dragItems[i], 'dragstart', function (event) {
- event.dataTransfer.setData('obj_id', this.id);
- return false;
- });
- }
- }
- // dragover event handler
- addEvent(dropAreas, 'dragover', function (event) {
- if (event.preventDefault) event.preventDefault();
- // little customization
- this.style.borderColor = "#000";
- return false;
- });
- // dragleave event handler
- addEvent(dropAreas, 'dragleave', function (event) {
- if (event.preventDefault) event.preventDefault();
- // little customization
- this.style.borderColor = "#ccc";
- return false;
- });
- // dragenter event handler
- addEvent(dropAreas, 'dragenter', cancel);
- // drop event handler
- addEvent(dropAreas, 'drop', function (event) {
- if (event.preventDefault) event.preventDefault();
- // get dropped object
- var iObj = event.dataTransfer.getData('obj_id');
- var oldObj = document.getElementById(iObj);
- // get its image src
- var oldSrc = oldObj.childNodes[0].src;
- oldObj.className += 'hidden';
- var oldThis = this;
- setTimeout(function() {
- oldObj.parentNode.removeChild(oldObj); // remove object from DOM
- // add similar object in another place
- oldThis.innerHTML += '<a id="'+iObj+'" draggable="true"><img src="'+oldSrc+'" /></a>';
- // and update event handlers
- updateDataTransfer();
- // little customization
- oldThis.style.borderColor = "#ccc";
- }, 500);
- return false;
- });
可以看到以上代码并不复杂。开始我们选择所有的可拖放的元素。然后将’dragstart’事件绑定到所有的draggable元素上,这样讲数据设定到dataTransfer对象中。对于所有的droppable区域我们绑定这些事件:’dragover’,'dragleave’和’drop’。针对前两个方法我们执行一个小的CSS自定义来激活drop区域。当我们放置可拖放的元素的时候,我们的脚本会复制可拖放元素并且将它们放置到活动的droppable区域(即相册),并且删除那个dropped元素。最后我们更新事件处理。
希望大家喜欢这个HTML5的图片拖放展示效果。
原文链接:http://www.mhtml5.com/2012/05/4941.html
【编辑推荐】