HTML5 拖放功能实现代码


Posted in HTML / CSS onJuly 14, 2016

在HTML5中,拖放是标准的一部分,任何元素都能够拖放,具体内容如下

1、拖放 

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <style type="text/css">  
  5. #div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}   
  6. </style>  
  7. <script>  
  8. function allowDrop(ev)   
  9. {   
  10. ev.preventDefault();   
  11. }   
  12. function drag(ev)   
  13. {   
  14. ev.dataTransfer.setData("Text",ev.target.id);   
  15. }   
  16. function drop(ev)   
  17. {   
  18. ev.preventDefault();   
  19. var data=ev.dataTransfer.getData("Text");   
  20. ev.target.appendChild(document.getElementById(data));   
  21. }   
  22. </script>  
  23. </head>  
  24. <body>  
  25. <p>拖动 W3CSchool.cc 图片到矩形框中:</p>  
  26. <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>  
  27. <br>  
  28. <img id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">  
  29. </body>  
  30. </html>   

2、设置元素为可拖放
 
首先,为了使元素可拖动,把 draggable 属性设置为 true :<img draggable="true">
 
3、拖动什么 - ondragstart 和 setData()
 
然后,规定当元素被拖动时,会发生什么。在上面的例子中,ondragstart 属性调用了一个函数,drag(event),它规定了被拖动的数据。dataTransfer.setData() 方法设置被拖数据的数据类型和值:

JavaScript Code复制内容到剪贴板
  1. function drag(ev)   
  2. {   
  3.    ev.dataTransfer.setData("Text",ev.target.id);   
  4. }    

在这个例子中,数据类型是 "Text",值是可拖动元素的 id ("drag1")。
 
4、放到何处 - ondragover
 
ondragover 事件规定在何处放置被拖动的数据。默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。这要通过调用 ondragover 事件的 event.preventDefault() 方法:event.preventDefault()
 
5、进行放置 - ondrop
 
 当放置被拖数据时,会发生 drop 事件。在上面的例子中,ondrop 属性调用了一个函数,drop(event):

JavaScript Code复制内容到剪贴板
  1. function drop(ev)   
  2. {   
  3. ev.preventDefault();   
  4. var data=ev.dataTransfer.getData("Text");   
  5. ev.target.appendChild(document.getElementById(data));   
  6. }    

代码解释:

调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)。通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。被拖数据是被拖元素的 id ("drag1")。把被拖元素追加到放置元素(目标元素)中。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
css3实现信纸/同学录效果的示例代码
Dec 11 HTML / CSS
利用css3实现的简单的鼠标悬停按钮
Nov 04 HTML / CSS
网页切图的CSS和布局经验与要点
Apr 09 HTML / CSS
css3翻牌翻数字的示例代码
Feb 07 HTML / CSS
浅谈pc和移动端的响应式的使用
Jan 03 HTML / CSS
HTML5 Canvas 起步(1) - 基本概念
May 12 HTML / CSS
html5文字阴影效果text-shadow使用示例
Jul 25 HTML / CSS
详解HTML5 Canvas绘制不规则图形时的非零环绕原则
Mar 21 HTML / CSS
利用三角函数在canvas上画虚线的方法
Jan 11 HTML / CSS
HTML5之消息通知的使用(Web Notification)
Oct 30 HTML / CSS
Bootstrap File Input文件上传组件
Dec 01 HTML / CSS
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
Mar 31 HTML / CSS
HTML块级标签汇总(小篇)
Jul 13 #HTML / CSS
HTML5进阶段内联标签汇总(小篇)
Jul 13 #HTML / CSS
关于HTML5语义标签的实践(blog页面)
Jul 12 #HTML / CSS
HTML5学习心得总结(推荐)
Jul 08 #HTML / CSS
HTML5之语义标签介绍
Jul 07 #HTML / CSS
HTML5之tabindex属性全面解析
Jul 07 #HTML / CSS
用html5的canvas和JavaScript创建一个绘图程序的简单实例
Jul 06 #HTML / CSS
You might like
PHP中HTML标签过滤技巧
2014/01/07 PHP
php去除数组中重复数据
2014/11/18 PHP
Yii框架小部件(Widgets)用法实例详解
2020/05/15 PHP
Exjs 入门篇
2010/04/07 Javascript
TreeView 用法(有代码)(asp.net)
2011/07/15 Javascript
JavaScript中的稀疏数组与密集数组[译]
2012/09/17 Javascript
jquery 定位input元素的几种方法小结
2013/07/28 Javascript
JS获取几种URL地址的方法小结
2014/02/26 Javascript
js 获取元素下面所有li的两种方法
2014/04/14 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
2016/04/26 Javascript
JavaScript中用let语句声明作用域的用法讲解
2016/05/20 Javascript
AngularJS基础 ng-cloak 指令简单示例
2016/08/01 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
2016/08/02 Javascript
node.js中实现kindEditor图片上传功能的方法教程
2017/04/26 Javascript
vue-cli axios请求方式及跨域处理问题
2018/03/28 Javascript
小程序云开发部署攻略(图文教程)
2018/10/30 Javascript
Vue.set 全局操作简单示例
2019/09/19 Javascript
layui-tree实现Ajax异步请求后动态添加节点的方法
2019/09/23 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
2019/09/26 Javascript
vue设置全局访问接口API地址操作
2020/08/14 Javascript
[58:57]2018DOTA2亚洲邀请赛3月29日小组赛B组 Effect VS VGJ.T
2018/03/30 DOTA
[35:39]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第二场 11.22
2020/11/24 DOTA
使用Python下的XSLT API进行web开发的简单教程
2015/04/15 Python
python删除列表内容
2015/08/04 Python
Python找出list中最常出现元素的方法
2016/06/14 Python
PySide和PyQt加载ui文件的两种方法
2019/02/27 Python
python实现登录密码重置简易操作代码
2019/08/14 Python
Python模拟登录requests.Session应用详解
2020/11/17 Python
任意存:BOXFUL
2018/05/21 全球购物
大学生学年自我鉴定
2014/02/10 职场文书
毕业自我鉴定书
2014/03/24 职场文书
父母寄语大全
2014/04/12 职场文书
求职信范文大全
2014/05/26 职场文书
2015年社区党务工作总结
2015/04/21 职场文书
导游词之包公祠
2019/11/25 职场文书
webpack介绍使用配置教程详解webpack介绍和使用
2022/06/25 Javascript