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>
範例實際效果#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>
步驟一、先將圖片設定好
圖片拖曳效果的主要流程是先將圖片的可拖曳功能打開，也就是範例中 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>
範例實際效果#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>
剛開始學習 HTML5 Drag and Drop 拖曳效果可能會感到有點複雜或棘手，但是熟悉後就可以設計出許多以往無法做到的網頁特效與新功能，提升整體網頁設計的專業度，值得花點時間練習這種拖曳特效。
補充、由於 HTML5 Drag and Drop 算是有點新的功能，請考慮網頁的目標族群是否均已使用新版瀏覽器，目前 FireFox、Chrome、Opera、Safari 這幾種瀏覽器的最新版本均支援 HTML5 Drag and Drop 拖曳特效，而 IE 瀏覽器必須在 IE9 以上的版本才有支援。
更多 HTML5 技巧