HTML 5实现的图片拖拽分组效果

在线演示 本地下载

今天我们介绍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

【编辑推荐】

1. HTML 5开发RPG游戏之一（地图人物实现）
2. HTML 5开发RPG游戏之二（跑起来吧英雄）
3. HTML 5开发RPG游戏之三（卷轴和对话）
4. HTML 5开发RPG游戏之四（游戏脚本化）
5. HTML 5游戏开发实用建议