HTML5拖動圖片是一項十分有用的功能，它允許用戶可以通過拖動圖片到指定區域來完成一些任務，從而提高用戶體驗和網站交互性。下面是一個簡單的HTML5拖動圖片的代碼示例：
<html>
<head>
<style>
#dropzone {
border: 2px dashed #ccc;
padding: 10px;
width: 400px;
height: 200px;
}
</style>
</head>
<body>
<div id="dropzone"></div>
<img src="your-imageURL.jpg" draggable="true" ondragstart="event.dataTransfer.setData('text/plain', event.target.id)" id="drag1" width="150" height="150">
<script>
var dropzone = document.getElementById('dropzone');
dropzone.addEventListener('dragover', function(e) {
e.preventDefault();
this.style.background = '#e1e1e1';
});
dropzone.addEventListener('dragleave', function(e) {
e.preventDefault();
this.style.background = '#fff';
});
dropzone.addEventListener('drop', function(e) {
e.preventDefault();
this.style.background = '#fff';
var data = e.dataTransfer.getData('text/plain');
var drag1 = document.getElementById(data);
drag1.parentNode.removeChild(drag1);
});
</script>
</body>
</html>該代碼包含一個div和一個圖片。圖片設置了`draggable`屬性為`true`，這標識它是可以被拖動的。當我們拖動圖片時，`ondragstart`事件被觸發，我們在這里將我們要拖動的圖片的id保存在`event.dataTransfer`中。
在我們要放置圖片的區域中，我們設置了三個事件監聽器：
1. `dragover`事件：當我們將圖片拖到指定區域時，該事件將被觸發。我們在這里調用`preventDefault()`阻止瀏覽器默認行為，并添加一個樣式到放置區域，告訴用戶它是可以放置圖片的。
2. `dragleave`事件：當我們將圖片拖出放置區域時，該事件將被觸發。同樣我們要阻止瀏覽器默認行為，并且在該div區域上刪除背景樣式。
3. `drop`事件：當我們在放置區域中釋放圖片時，該事件將被觸發。在這里，我們阻止瀏覽器默認行為。然后我們使用`dataTransfer.getData()`來獲取我們在`ondragstart`事件中保存的圖片id。最后，我們刪除拖動的圖片。
總之，以上是關于HTML5拖動圖片的一些簡單代碼示例。我們可以根據需要進行調整和修改，在實際應用中給用戶提供更好的體驗。上一篇mysql5張表聯查優化
下一篇html5拖動的代碼