HTML5中拖動圖像的功能能夠為用戶帶來更好的交互體驗。以下是HTML5中實現拖動圖像的代碼：

首先，需要在HTML文檔中定義一個img元素，并將其class屬性設置為“draggable”，以便于開發者能夠在JavaScript中通過class選擇器獲取該元素：

<img class="draggable" src="your-image-src">

接下來，在JavaScript代碼中，需要為該img元素添加對mousedown和mouseup事件的監聽。當用戶在該元素上按下鼠標時，需要執行一些操作以允許拖拽；當用戶釋放鼠標時，需要執行一些操作以完成拖拽操作。

//獲取拖拽元素
var draggable = document.querySelector('.draggable');
var dragStart = function(event) {
// 阻止默認瀏覽器動作（選擇、拖拽等）
event.preventDefault();
// 設置數據
event.dataTransfer.setData('text/plain', draggable.src);
};
var dragEnd = function(event) {
// 阻止默認瀏覽器動作（選擇、拖拽等）
event.preventDefault();
};
// 添加mousedown和mouseup事件監聽
draggable.addEventListener('mousedown', dragStart, false);
draggable.addEventListener('mouseup', dragEnd, false);

以上代碼中的dragStart和dragEnd函數分別處理mousedown和mouseup事件。在dragStart函數中，我們通過調用event.preventDefault()方法來阻止默認行為的觸發，然后通過event.dataTransfer.setData()方法設置要拖放的圖像的數據。在dragEnd函數中，同樣地，我們也需要調用event.preventDefault()阻止默認行為的觸發。

最后，在我們的JavaScript代碼中添加對dragover和drop事件的監聽，以便于在用戶拖動圖像到指定位置時執行一些操作。例如，可以在該位置顯示拖放的圖像，或者將圖像上傳到服務器上：

var dropZone = document.querySelector('.drop-zone');
var allowDrop = function(event) {
// 阻止默認瀏覽器動作（選擇、拖拽等）
event.preventDefault();
};
var drop = function(event) {
// 阻止默認瀏覽器動作（選擇、拖拽等）
event.preventDefault(); 
// 獲取拖拽圖像的數據
var data = event.dataTransfer.getData('text/plain');
// 將圖像插入到.drop-zone元素中
dropZone.innerHTML = '<img src="' + data + '">';
};
// 添加dragover和drop事件監聽
dropZone.addEventListener('dragover', allowDrop, false);
dropZone.addEventListener('drop', drop, false);

以上代碼中的dropZone變量表示了一個可以拖動圖像的區域。在allowDrop函數中，我們同樣需要調用event.preventDefault()方法，以阻止默認行為的觸發。在drop函數中，我們獲取拖拽圖像的數據，并將其插入到.drop-zone元素中。這樣，用戶就能夠輕松地將圖像拖動到指定位置上。

總的來說，HTML5中拖動圖像的功能能夠為用戶帶來更好的交互體驗與操作效率。以上所演示的代碼也能夠為開發者提供在實現拖動圖像時的參考與借鑒。