HTML5拖動(dòng)Div代碼下載：
<!DOCTYPE html>
<html>
<head>
<title>拖動(dòng)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>代碼說(shuō)明：
1. 首先在head中添加CSS樣式，設(shè)置div的樣式和拖動(dòng)時(shí)的鼠標(biāo)樣式。
2. 接著在head中添加JavaScript代碼，為div添加dragstart和dragend事件，實(shí)現(xiàn)拖拽和結(jié)束拖拽的時(shí)候的操作。
3. 在body中添加一個(gè)div元素，用id賦值為"dragDiv"。
4. 點(diǎn)擊鼠標(biāo)左鍵，拖動(dòng)dragDiv元素，可以把這個(gè)元素拖到別的位置。同時(shí)可以在控制臺(tái)中看到元素的id，即dragDiv。
5. 如果不需要拖動(dòng)到別的位置，只是想拖動(dòng)元素本身，可以在dragEnd函數(shù)中添加preventDefault()，取消默認(rèn)事件，實(shí)現(xiàn)拖動(dòng)元素本身的效果。
6. 使用以上代碼可以實(shí)現(xiàn)html5拖動(dòng)div。