萬盛學電腦網 >> 網頁制作 >> Html5 >> HTML 5 拖放簡介
HTML 5 拖放簡介
拖放（Drag 和 drop）是 HTML5 標准的組成部分。
拖放
<!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>
親自試一試
它看上去也許有些復雜，不過我們可以分別研究拖放事件的不同部分。
設置元素為可拖放
- 調用 preventDefault() 來避免浏覽器對數據的默認處理（drop 事件的默認行為是以鏈接形式打開）
- 通過 dataTransfer.getData("Text") 方法獲得被拖的數據。該方法將返回在 setData() 方法中設置為相同類型的任何數據。
- 被拖數據是被拖元素的 id ("drag1")
- 把被拖元素追加到放置元素（目標元素）中
Html5排行
程序編程推薦
相關文章
copyright © 萬盛學電腦網 all rights reserved