#学习笔记#(10)元素拖放事件-html

来源：互联网发布：唱歌视频录制软件编辑：程序博客网时间：2024/06/05 19:40

四个函数

1 让元素变成可拖动的数据

2 当元素到达可拖放的区域，阻止原来的设定（链接打开新网页）

3 当在可拖放区域(div)内，释放鼠标键，div获取元素数据，进行放置

4 当完成放置给出提示

<html><head><title>Html5图片拖放</title><style type="text/css">div{float:left; width:250px; height:200px; margin:10px;padding:10px;border:1px solid #aaaaaa;}p{display:none;}</style></head><body><div ondragover="stoplink(event)" ondrop="getdata(event)"><img id="a" src="1.jpg" draggable="true" ondragstart="setdata(event)" ondragend="tishi()"/></div><div ondragover="stoplink(event)" ondrop="getdata(event)"></div><p id="p1">您已完成拖动！</p><script type="text/javascript">function setdata(ev){//元素a开始被拖动时，将元素a转化为可拖动的数据ev.dataTransfer.setData("text",ev.target.id);}function stoplink(ev){//当元素到达可拖放区域时，阻止自动打开新的链接ev.preventDefault();}function getdata(ev){//当放开鼠标键时，div获取元素a数据，进行放置var data=ev.dataTransfer.getData("text");//获取元素a的数据ev.target.appendChild(document.getElementById(data));//将元素a添加为div子元素}function tishi(){//当完成拖动时给出信息提示document.getElementById("p1").style.display="block";}</script><!--在拖动目标上触发事件 (源元素):ondragstart - 用户开始拖动元素时触发ondrag - 元素正在拖动时触发ondragend - 用户完成元素拖动后触发释放目标时触发的事件:ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件ondrop - 在一个拖动过程中，释放鼠标键时触发此事件--></body></html>

0 0