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 相关文章推荐
纯CSS实现菜单、导航栏的3D翻转动画效果
Apr 23 HTML / CSS
CSS3 text-shadow实现文字阴影效果
Feb 24 HTML / CSS
CSS3 文字动画效果
Nov 12 HTML / CSS
canvas粒子动画背景的实现示例
Sep 03 HTML / CSS
HTML5引入的新数组TypedArray介绍
Dec 24 HTML / CSS
基于IE10/HTML5 开发
Apr 22 HTML / CSS
使用HTML5技术开发一个属于自己的超酷颜色选择器
Sep 22 HTML / CSS
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
Apr 08 HTML / CSS
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
Apr 14 HTML / CSS
使用HTML5里的classList操作CSS类
Jun 28 HTML / CSS
H5调用相机拍照并压缩图片的实例代码
Jul 20 HTML / CSS
CSS3实现三角形不断放大效果
Apr 13 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 无限级分类学习参考之对ecshop无限级分类的解析 带详细注释
2010/03/23 PHP
PHP操作MongoDB时的整数问题及对策说明
2011/05/02 PHP
深入PHP数据缓存的使用说明
2013/05/10 PHP
php获取用户浏览器版本的方法
2015/01/03 PHP
windows环境下使用Composer安装ThinkPHP5
2018/05/18 PHP
Laravel框架基于中间件实现禁止未登录用户访问页面功能示例
2019/01/17 PHP
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
2012/08/24 Javascript
JSON 数字排序多字段排序介绍
2013/09/18 Javascript
详解JavaScript中undefined与null的区别
2014/03/29 Javascript
jQuery模仿京东/天猫商品左侧分类导航菜单效果
2016/06/29 Javascript
jQuery Raty 一款不错的星级评分插件
2016/08/24 Javascript
遍历js中对象的属性和值的实例
2016/11/21 Javascript
javascript 注释代码的几种方法总结
2017/01/04 Javascript
react-router4 配合webpack require.ensure 实现异步加载的示例
2018/01/18 Javascript
使用Vue开发动态刷新Echarts组件的教程详解
2018/03/22 Javascript
详解vue axios二次封装
2018/07/22 Javascript
js实现百度登录窗口拖拽效果
2020/03/19 Javascript
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
2020/05/27 Javascript
python2.7+selenium2实现淘宝滑块自动认证功能
2018/02/24 Python
详解Python:面向对象编程
2019/04/10 Python
使用Python3内置文档高效学习以及官方中文文档
2019/05/19 Python
pip安装python库的方法总结
2019/08/02 Python
在django项目中导出数据到excel文件并实现下载的功能
2020/03/13 Python
Django如何使用asyncio协程和ThreadPoolExecutor多线程
2020/10/12 Python
用python读取xlsx文件
2020/12/17 Python
施华洛世奇英国官网:SWAROVSKI英国
2017/03/13 全球购物
创联软件面试题笔试题
2012/10/07 面试题
初中化学教学反思
2014/01/23 职场文书
公司领导班子召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
教师党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
初中学生操行评语
2014/12/26 职场文书
2015年客服工作总结范文
2015/04/02 职场文书
投标单位介绍信
2015/05/05 职场文书
CSS3 制作的悬停缩放特效
2021/04/13 HTML / CSS
解析高可用Redis服务架构分析与搭建方案
2021/06/20 Redis
对象析构函数__del__在Python中何时使用
2022/03/22 Python