HTML 5實現的圖片拖拽分組效果

作者：HTML5 2012-05-17 13:17:26

基本目前所有的現代瀏覽器(Firefox，Chrome，Safari，或者Opera)都支持這個實用的功能。這意味著我們可以考慮在我們的項目和網站中使用這個功能。更重要的是代碼編寫非常簡單。

分享一個HTML5的drag drop API實現的圖片拖拽分組效果

今天我們介紹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

【編輯推薦】

HTML 5開發RPG游戲之一（地圖人物實現）
HTML 5開發RPG游戲之二（跑起來吧英雄）
HTML 5開發RPG游戲之三（卷軸和對話）
HTML 5開發RPG游戲之四（游戲腳本化）
HTML 5游戲開發實用建議

責任編輯：張偉來源： HTML5研究小組

HTML5