HTML5的拖放功能為用戶提供了一種方便快捷的方式，將圖片拖到指定位置上。下面我們來看看如何使用HTML5的拖放功能來實現圖片的拖放。
首先，在HTML5中要實現拖放功能，需要使用一些JavaScript來輔助完成。如下是拖放功能的HTML代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5圖片拖放代碼</title>
<style>
div{
width:300px;
height:300px;
border:1px solid #333;
}
img{
width:100px;
height:100px;
border:1px solid #999;
}
</style>
<script>
window.onload=function(){
var oDiv=document.querySelector('div');
oDiv.addEventListener('dragover',function(e){
e.preventDefault();
});
oDiv.addEventListener('drop',function(e){
e.preventDefault();
var file=e.dataTransfer.files[0];
var reader=new FileReader();
reader.readAsDataURL(file);
reader.onload=function(){
var oImg=new Image();
oImg.src=reader.result;
oDiv.appendChild(oImg);
};
});
};
</script>
</head>
<body>
<div></div>
</body>
</html>上面代碼中，我們創建了一個`div`容器，用于接收拖放的圖片。在`div`上綁定事件`dragover`，僅僅是阻止瀏覽器的默認事件，使其可以接受拖放事件。在`div`上綁定事件`drop`，獲取拖放的圖片數據，然后創建`img`標簽，將圖片顯示在`div`容器內。
上述HTML代碼中，我們使用了一個`FileReader`來讀取文件，讀取完成后將其設置為`img`的`src`屬性。這個方法只能支持到IE10及以上瀏覽器，因此可能需要進行瀏覽器兼容性處理。
在瀏覽器中打開以上代碼，會看到一個300x300的灰色框。將一張圖片拖到這個框內，就會看到圖片被正確顯示在框內。
總之，HTML5拖放功能提供了一種更加友好的用戶體驗，具有廣泛的使用價值。