javascript html5轻松实现拖动功能
2017-03-01 16:15
691 查看
拖放(drag和drop)是html5标准组成,下面我们从五个方面对其进行叙述,分别是如何成为拖动物体,如何成为拖动目标,拖动物体上拥有的事件,拖动目标上拥有的事件以及拖放物体间如何传递信息。
拖动物体上拥有的事件
- dragstart (在物体刚被拖动时触发)
- drag (在dragstart事件触发之后就被触发)
- dragend (拖动事件结束时触发)
拖动目标上拥有的事件
- dragenter (当拖拽元素进入放置目标时触发)
- dragover (当拖拽元素在放置目标中移动时触发,类似于mouseover)
- drop (当拖拽元素放置在放置目标中时触发)
如何成为拖动物体
在html中img元素默认可以进行拖拽,其它元素需要设置draggable=true,即可对其进行拖拽。
<div draggable="true"></div>
如何成为拖动目标
html中,元素默认不能成为放置目标,只有我们禁止了drapenter和drapover事件的默认行为时,可以称为拖放目标。
droptarget.addEventListener('dragenter', function(event) { event.preventDefault(); }); droptarget.addEventListener('dragover', function(event) { event.preventDefault(); });
拖放物体间如何传递信息
事件中具有一个dataTransfer对象,它拥有的两个常用方法setData()和getData(),分别用于在存放拖拽信息以及获取拖拽信息。其中,setData()只能在拖拽事件刚开始时设置,即dragstart事件时设置,getData()则一般在放置获取,即drop事件触发时获取。
// drapobj 拖拽元素 // droptarget 放置目标 dragobj.addEventListener('dragstart', function(event) { event.dataTransfer.setData('id', dragobj.id); }); droptarget.addEventListener('drop', function(event) { var id = event.dataTransfer.getData('id'); var obj = document.getElementById(id); event.preventDefault(); this.appendChild(obj); });
完整代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5 拖拽</title> </head> <body> <div draggable="true"></div> <div style="height: 150px" id="dragobj" draggable="true"> <img src="c_06.jpg" alt=""> </div> <div id="droptarget" style="width: 150px; height: 150px;background-color: #eee;"></div> </body> <script> var droptarget = document.getElementById('droptarget'); var dragobj = document.getElementById('dragobj'); // drapobj 拖拽元素 // droptarget 放置目标 dragobj.addEventListener('dragstart', function(event) { event.dataTransfer.setData('id', dragobj.id); });droptarget.addEventListener('dragenter', function(event) { event.preventDefault(); }); droptarget.addEventListener('dragover', function(event) { event.preventDefault(); });droptarget.addEventListener('drop', function(event) { var id = event.dataTransfer.getData('id'); var obj = document.getElementById(id); event.preventDefault(); this.appendChild(obj); }); </script> </html>
存在问题
火狐浏览器中拖拽图片默认打开新窗口,根据javascript高级程序设计中在drop事件中禁止默认事件,未解决问题。
解决方法:将图片作为div的背景图片,将div作为拖拽物体,则不存在此问题。
最终代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5 拖拽</title> <style> div { width: 120px; height: 136px; } #dragobj { background: url('c_06.jpg') no-repeat; } #droptarget { background-color: #eee; } </style> </head> <body> <div id="dragobj" draggable="true"> </div> <div id="droptarget"></div> </body> <script> var droptarget = document.getElementById('droptarget'); var dragobj = document.getElementById('dragobj'); // drapobj 拖拽元素 // droptarget 放置目标 dragobj.addEventListener('dragstart', function(event) { event.dataTransfer.setData('id', dragobj.id); });droptarget.addEventListener('dragenter', function(event) { event.preventDefault(); }); droptarget.addEventListener('dragover', function(event) { event.preventDefault(); });droptarget.addEventListener('drop', function(event) { var id = event.dataTransfer.getData('id'); var obj = document.getElementById(id); event.preventDefault(); this.appendChild(obj); }); </script> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- 微信开发之移动手机WEB页面(HTML5)Javascript实现一键拨号及短信发送功能
- JavaScript实现地图拖动功能SpryMap
- HTML5轻松实现拍照上传功能[转载]
- 微信开发之移动手机WEB页面(HTML5)Javascript实现一键拨号及短信发送功能
- JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
- JavaScript+Html5实现按钮的复制文字到剪切板功能,手机网页兼容
- javascript html5 canvas实现可拖动省份的中国地图
- javascript HTML5 Canvas实现圆盘抽奖功能
- javascript html5移动端轻松实现文件上传
- 微信开发之移动手机WEB页面(HTML5)Javascript实现一键拨号及短信发送功能
- 微信开发之移动手机WEB页面(HTML5)Javascript实现一键拨号及短信发送功能
- [HTML] 微信开发之移动手机WEB页面(HTML5)Javascript实现一键拨号及短信发送功能
- JavaScript HTML5 手机版手机版网站起码要实现一些基本的功能吧:
- JavaScript地图拖动功能SpryMap的简单实现
- 微信开发之移动手机WEB页面(HTML5)Javascript实现一键拨号及短信发送功能
- JavaScript实现图片拖动功能 - SpryMap
- 微信开发之移动手机WEB页面(HTML5)Javascript实现一键拨号及短信发送功能
- 微信开发之移动手机WEB页面(HTML5)Javascript实现一键拨号及短信发送功能
- JavaScript html5利用FileReader实现上传功能
- Javascript是实现HTML5强大功能的重要语言