HTML5圖片拖拽功能已經成為了網頁設計的重要部分，許多網站都使用它來創建交互性強的用戶界面。在HTML5中，可以使用拖拽事件來處理拖拽操作，利用JavaScript代碼來控制拖拽效果。

//HTML代碼//JavaScript代碼
function drag(event) {
event.dataTransfer.setData("text", event.target.id);
}
//目標區域的代碼
function allowDrop(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("text");
event.target.appendChild(document.getElementById(data));
}

首先，在HTML代碼中，我們要設置圖片的dragable屬性為true，這樣圖片就可以被拖拽。當圖片被拖拽時，我們需要觸發一個事件，這里使用了ondragstart屬性。

JavaScript代碼中，我們使用drag函數來處理拖拽事件，將被拖拽的圖片的id信息保存到event.dataTransfer對象中，這樣就可以在拖拽完成之后將圖片放置到目標容器中。

對于目標容器，我們需要在HTML代碼中設置ondrop和ondragover屬性。ondragover屬性用于在拖拽動作進行時觸發，可以讓拖拽目標了解得到可以放置的容器位置，同時也可以更好地提示用戶該容器是可以接受拖拽物的。

最后，在JavaScript代碼中，我們需要定義兩個函數來處理ondrop和ondragover事件。在ondrop事件中，我們通過event.dataTransfer.getData方法獲取保存在event對象中的圖片id信息，并將其插入到目標容器中。

通過這些代碼，我們可以完成HTML5圖片拖拽的功能，在網頁中創建交互性強的用戶界面，提高用戶體驗。