HTML5允許對頁面元素進行拖動，只要在元素的屬性中加上draggable="true"，就可以拖動了。
在拖動的同時，必須記錄被拖動的元素，通過在元素上注冊事件ondragstart即可實現，比如規定了一個img元素可以拖動，代碼如下:
<img draggble="true" ondragstart="drag(event);">
function drag(event)
{
event.dataTransfer.setData("Text",ev.target.id);
}
在拖動img的時候，drag函數就會把img的id屬性記錄在事件中，記錄值的類型是Text。
下一步是規定哪些元素可以放置被拖動的img，比如一個div可以放置這個被拖動的img, 需要在這個div上定義一個事件:ondragover,在這個事件中，需要阻止對事件的默認處理方式，其實就是硬性的加上一句:event.preventDefault()
<div ondragover="allowDrop(event);">
function allowDrop(event)
{
event.preventDefault();
}
下一步就是要在容納這個img的div中把這個img放到里面，當放置的時候，會觸發ondrop事件通過event.dataTransfer.getData("Text")來得到上面event.dataTransfer.setData("Text",ev.target.id)的img的id,通過event.target.appendChild(document.getElementById(data))來把img放到div中，注意這里event.target指的是div，不是上面的img了。至此，頁面的拖動完成了。下面貼出在w3school中的實例代碼:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69" />
</body>
</html>