在HTML5中，可以使用一些新的屬性和API來實現圖片的可拖放效果。具體實現步驟如下：

// HTML代碼
<img src="image.jpg" id="myImage">// JS代碼
var img = document.getElementById("myImage");
img.addEventListener("dragstart", dragStart); // 當圖片被拖拽時，調用dragStart函數
img.addEventListener("dragend", dragEnd); // 當拖拽結束時，調用dragEnd函數
function dragStart(event) {
event.dataTransfer.setData("text", event.target.id); // 將圖片的id設置為數據類型為"text"的數據
}
function dragEnd(event) {
event.target.style.opacity = "1"; // 拖拽結束后，將圖片透明度設為1
}

通過以上代碼實現了圖片可拖放，當用戶開始拖動圖片時，會觸發dragStart函數，并且將圖片的id設置為數據類型為"text"的數據，隨后在拖動過程中，用戶將可以將圖像拖動到任何可放置的元素上，當拖動結束時，會觸發dragEnd函數，此時將圖片的透明度設為1，表示拖動結束。

除此之外，還可以在可放置的元素上設置一些屬性，以確定哪些元素可以接受拖放的圖片，具體實現方法如下：

// HTML代碼
<div id="target" ondrop="drop(event)" ondragover="allowDrop(event)"></div>// JS代碼
function allowDrop(event) {
event.preventDefault(); // 阻止瀏覽器對被拖放數據的默認處理方式
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("text");
var img = document.getElementById(data);
event.target.appendChild(img); // 將被拖放的圖片添加到目標容器中
}

以上代碼中，使用了"ondrop"和"ondragover"事件來允許、禁止在目標容器上進行拖放操作。當用戶將圖片拖動到目標容器上方時，如未設置"ondragover"事件，則可能無法將它放置在目標容器中。通過設置了“ondrop”事件，當把拖動的內容放置到目標容器上時，觸發函數“drop”，并將被拖放的圖片添加到目標容器中。

通過以上實現方法，就可以很方便地實現HTML5中圖片的可拖放效果了。