HTML5 Drag and Drop 拖曳效果

HTML5 Drag and Drop 拖曳效果是 HTML5 非常重要的一個功能，傳統的 HTML 網頁設計是不能隨意拖曳網頁元素的，發展至 HTML5 已經實現了網頁元素拖曳的新功能，所謂的拖曳就是將一個網頁元素用滑鼠拖到另外一個位置放下，這是一種 HTML5 的標準規則，只要正確的使用 HTML5 Drag and Drop 技巧，任何網頁元素都可以達到拖曳的效果，絕大多數新版的主流瀏覽器都支援 HTML5 Drag and Drop。

HTML5 Drag and Drop 拖曳效果範例一、將圖片拖曳至 DIV 區塊內
<style type="text/css">
#Box1{
    width:200px;
    height:100px;
    padding:10px;
    border:1px #ccc dashed;
    float:left;
    margin-right:10px;
}
</style>
<script type="text/javascript">
function AllowDrop(event){
    event.preventDefault();
}
function Drag(event){
    event.dataTransfer.setData("text",event.currentTarget.id);
}
function Drop(event){
    event.preventDefault();
    var data=event.dataTransfer.getData("text");
    event.currentTarget.appendChild(document.getElementById(data));
}
</script>
<div id="Box1" ondrop="Drop(event)" ondragover="AllowDrop(event)"></div>
<img id="Img1" src="圖片網址" draggable="true" ondragstart="Drag(event)">
<div style="clear:both;"></div>
範例實際效果
範例一個玩法是將右邊綠色的長方形圖片拖曳到左邊預先準備好的虛線框框內，HTML5 的 Drag and Drop 拖曳效果需要用到 HTML5 本身的語法之外，還必須用到 JavaScript 的支援，以範例一的主要架構可以看到，我們先準備了一個 DIV 區塊（id="Box1"），並用基本的 CSS 設計尺寸與邊框，然後再準備一個圖片（id="Img1"），設定好圖片的被拖曳效果以及 DIV 區塊的可被放置元素屬性，這就是拖曳的概念。

步驟一、先將圖片設定好

圖片拖曳效果的主要流程是先將圖片的可拖曳功能打開，也就是範例中 Img1 的「draggable="true"」部分，接著當拖曳動作產生時，會觸發一個 JavaScript function，名稱為 Drag，這個部分是 Img1 的「ondragstart="Drag(event)」部分。

步驟二、開始拖曳（Drag）

接著我們要來看 Drag 這個 function 的功能，「dataTransfer.setData」是將被拖曳的元素設置數據，以此範例的內容來說，是設置 Img1 的數據類型為 text，而數據值則是圖片的 id，也就是 Img1，開始拖曳的時候就會執行這些動作。

步驟三、開始放置（Drop）

拖曳特效的第三個重點就是放置（Drop），在範例一中先準備好的那個虛線 DIV 框框就是要用來放置圖片用的地方，在這 DIV 區塊總共有兩個重點，第一個重點是要將＂可放置元素＂的功能打開，因為預設為不可放置，所以不打開是無法放置圖片的，打開可放置功能是 DIV 區塊的「ondragover="AllowDrop(event)"」部分，當拖曳動作在區塊上執行時會觸發 AllowDrop 這個 function，其內容就是將＂可放置元素＂的功能打開。再來是當開始放置動作發生的時候，自動觸發 Drop 這個 funtion，此部分是由 DIV 區塊的「ondrop="Drop(event)"」控制，Drop function 的內容是獲得被拖曳元素的資料並放置，透過「event.dataTransfer.getData("text");」可獲得圖片在拖曳時，用 setData 所設置的數據，有了數據後即可用「event.currentTarget.appendChild(document.getElementById(data));」將圖片放置。

以上三個步驟就是網頁元素從開始拖曳到成功放置的流程，這樣的技巧不只可以將圖片拖曳到單一個地方，範例二做了一點點的修改，讓圖片可以拖曳到好幾個不同的區域，Drag and Drop 的概念是相同的。

HTML5 Drag and Drop 拖曳效果範例二、讓圖片在不同區域內拖曳
<style type="text/css">
#Box2,#Box3,#Box4{
    width:200px;
    height:100px;
    padding:10px;
    border:1px #ccc dashed;
    float:left;
    margin-right:10px;
}
</style>
<script type="text/javascript">
function AllowDrop(event){
    event.preventDefault();
}
function Drag(event){
    event.dataTransfer.setData("text",event.currentTarget.id);
}
function Drop(event){
    event.preventDefault();
    var data=event.dataTransfer.getData("text");
    event.currentTarget.appendChild(document.getElementById(data));
}
</script>
<div id="Box2" ondrop="Drop(event)" ondragover="AllowDrop(event)">
    <img id="Img2" src="圖片網址" draggable="true" ondragstart="Drag(event)">
</div>
<div id="Box3" ondrop="Drop(event)" ondragover="AllowDrop(event)"></div>
<div id="Box4" ondrop="Drop(event)" ondragover="AllowDrop(event)"></div>
<div style="clear:both;"></div>
範例實際效果
範例二有三個 DIV 區塊，id 都不一樣，為的是要讓拖曳圖片後可以放置在正確的區域，因為 Drop function 會根據放置的區塊位置，取得 DIV 的 id，當我們在隨意拖曳圖片置任何一個 DIV 區塊內，Drop function 都有辦法判斷出來，這就是網頁元素任意拖曳的效果。

剛開始學習 HTML5 Drag and Drop 拖曳效果可能會感到有點複雜或棘手，但是熟悉後就可以設計出許多以往無法做到的網頁特效與新功能，提升整體網頁設計的專業度，值得花點時間練習這種拖曳特效。

補充、由於 HTML5 Drag and Drop 算是有點新的功能，請考慮網頁的目標族群是否均已使用新版瀏覽器，目前 FireFox、Chrome、Opera、Safari 這幾種瀏覽器的最新版本均支援 HTML5 Drag and Drop 拖曳特效，而 IE 瀏覽器必須在 IE9 以上的版本才有支援。

更多 HTML5 技巧
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012