您的位置：首页 > Web前端 > HTML5

HTML5----拖放drag,drop

2014-09-05 11:27 316 查看

Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>拖放drag,drop</title>
<style type="text/css">
#div1{ width:230px; height:80px; padding:10px; border:1px solid #666;}
</style>
</head>

<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<img id="drag1" draggable="true" ondragstart="drag(event)"  src="img1.jpg"/>
<br>
<img id="aaa" draggable="true" ondragstart="drag(event)"  src="img2.jpg"/>

<!--
1.设置元素为可拖放：draggable="true"

2.拖动什么--ondragstart（调用drag(event)） 和 setData ,它规定了被拖动的数据
	dataTransfer.setData() 方法设置被拖数据的数据类型和值
    
3.放到那里--ondragover事件的event.preventDefault()方法

4.进行放置，会发生drop事件
	a.调用preventDefault()来避免浏览器数据的默认处理（drop事件的默认行为是以链接形式打开）
    b.通过dataTransfer.getData("Text")方法获得被拖的数据，该方法将返回在setData()方法中设置为相同类型的任何数据
    c.被拖数据是被拖元素的id("drag1")
    d.把被拖元素追加到放置元素中
-->

<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>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航