<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<style>
#div1{
border:1px green solid;
width: 300px;
height:250px;
}
#div2{
border:1px red solid;
width: 200px;
height:100px;
}
</style>
</head>
<body>
<!--
放在何处-ondragover ondragover规定被拖动的数据放置在何处。
默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式,
在这里,调用 preventDefault() 来避免浏览器对数据的默认处理。
意思就是 当设置了ondragover这个属性调用了一个函数 并且说明这个div1是可以被放置元素的
ondrap 这个是进行放置的
-->
<div id="div1" οndrοp="drop(event)" οndragοver="allowDrop(event)">
</div>
<!--这个div2是被拖动的元素 ondragstart这个属性会调用一个函数
这个函数定义了被拖动的数据,dataTransfer.setData()方法设置了
被拖数据的数据类型和值,数据类型可自己设置(即下面代码中的“Text”)。值即被拖数据的id,所以拖动元素和被放置
元素均需设置id。 这里面就是保存了div的id div2 和div中内容的类型 文本
-->
<div id="div2" draggable="true" οndragstart="drag(event)">
你好
</div>
</body>
<script>
/*拖拽分为三个行为
* 1,要记录要拖拽的元素和内容 ondragstart 这个属性 后面需要有个函数处理
*
* 2、目标对象需要修改浏览器的默认行为 ondragover
*
* 3、ondrap 拖拽行为 处理函数需要获取到可拖拽的内容 然后添加到当前的元素中
* */
function allowDrop(ev){
/*允许放置 避免浏览器默认的处理*/
ev.preventDefault();
}
function drag(ev){
/*记录了div2的id和放置的内容类型*/
ev.dataTransfer.setData("text",ev.target.id);
}
function drop(ev){
var data=ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</html>
html5中的拖拽行为
最新推荐文章于 2024-06-06 15:07:55 发布