HTML5拖動Div代碼下載：
<!DOCTYPE html>
<html>
<head>
<title>拖動Div</title>
<meta charset="UTF-8">
<style type="text/css">
#dragDiv {
position: absolute;
width: 100px;
height: 100px;
background-color: #f00;
color: #fff;
text-align: center;
line-height: 100px;
cursor: move;
}
</style>
<script type="text/javascript">
window.onload = function () {
var dragDiv = document.getElementById("dragDiv");
dragDiv.addEventListener("dragstart", dragStart, false);
dragDiv.addEventListener("dragend", dragEnd, false);
}
function dragStart(event) {
event.dataTransfer.setData("Text", event.target.id);
}
function dragEnd(event) {
event.preventDefault();
}
</script>
</head>
<body>
<div id="dragDiv">拖我試試</div>
</body>
</html>代碼說明：
1. 首先在head中添加CSS樣式，設置div的樣式和拖動時的鼠標樣式。
2. 接著在head中添加JavaScript代碼，為div添加dragstart和dragend事件，實現拖拽和結束拖拽的時候的操作。
3. 在body中添加一個div元素，用id賦值為"dragDiv"。
4. 點擊鼠標左鍵，拖動dragDiv元素，可以把這個元素拖到別的位置。同時可以在控制臺中看到元素的id，即dragDiv。
5. 如果不需要拖動到別的位置，只是想拖動元素本身，可以在dragEnd函數中添加preventDefault()，取消默認事件，實現拖動元素本身的效果。
6. 使用以上代碼可以實現html5拖動div。
下一篇html5搶紅包代碼