HTML5給網站添加了眾多新的功能，其中最受歡迎之一就是圖形拖拽。通過此功能，用戶可以輕松地拖動頁面上的元素，而不必刷新頁面，大大提高了網站的交互體驗。
下面我們來看一段使用HTML5圖形拖拽功能的示例代碼：
<!DOCTYPE html>
<html>
<head>
<title>圖形拖拽示例</title>
<style>
#box {
width: 100px;
height: 100px;
background-color:red;
position: absolute;
left: 0;
top: 0;
}
</style>
<script>
window.onload = function() {
var box = document.getElementById("box");
box.addEventListener("mousedown", startDrag, false);
document.addEventListener("mouseup", stopDrag, false);
}
function startDrag(event) {
var box = document.getElementById("box");
box.offsetX = event.clientX - box.offsetLeft;
box.offsetY = event.clientY - box.offsetTop;
document.addEventListener("mousemove", drag, false);
}
function drag(event) {
var box = document.getElementById("box");
box.style.left = (event.clientX - box.offsetX) + "px";
box.style.top = (event.clientY - box.offsetY) + "px";
}
function stopDrag(event) {
document.removeEventListener("mousemove", drag, false);
}
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>在上面的代碼中，我們定義了一個100*100像素的紅色方塊作為拖拽對象，通過添加mousedown、mousemove、mouseup事件監聽器，實現了圖形拖拽操作。
當用戶鼠標點擊拖拽對象時，startDrag()函數被觸發，記錄了鼠標當前位置與拖拽對象左上角位置的差值。在mousemove事件觸發時，根據鼠標當前位置的變化，拖拽對象的left和top樣式隨之改變，最終實現圖形的拖拽操作。當用戶釋放鼠標時，拖拽操作結束，removeEventListener()函數清除了mousemove事件監聽器，回收資源。
HTML5圖形拖拽功能的實現，給網站開發帶來了極大的便利與創造力，相信未來這一功能還將不斷得到完善和拓展。
上一篇html5圖切換代碼
下一篇三級導航css