HTML5----拖放drag,drop

最新推荐文章于 2024-05-08 09:30:42 发布

damys

最新推荐文章于 2024-05-08 09:30:42 发布

阅读量987

点赞数

分类专栏： HTML5.CSS3 HTML5 文章标签：拖放drag drop

本文链接：https://blog.csdn.net/damys/article/details/39078631

版权

HTML5.CSS3 同时被 2 个专栏收录

46 篇文章 1 订阅

订阅专栏

HTML5

12 篇文章 2 订阅

订阅专栏

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" οndrοp="drop(event)" οndragοver="allowDrop(event)"></div>
<br />
<img id="drag1" draggable="true" οndragstart="drag(event)"  src="img1.jpg"/>
<br>
<img id="aaa" draggable="true" οndragstart="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>