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教程(10):CSS3 HSL声明设置颜色
Apr 02 HTML / CSS
CSS3中Color的一些特性介绍
May 27 HTML / CSS
CSS3系列教程:背景图片(背景大小和多背景图) 应用说明
Dec 19 HTML / CSS
纯css3无js实现的Android Logo(有简单动画)
Jan 21 HTML / CSS
CSS3正方体旋转示例代码
Aug 08 HTML / CSS
通过一张图教会你CSS3倒影的实现
Sep 26 HTML / CSS
HTML5地理定位_动力节点Java学院整理
Jul 12 HTML / CSS
移动HTML5前端框架—MUI的使用
Dec 18 HTML / CSS
canvas 基础之图像处理的使用
Apr 10 HTML / CSS
amazeui树节点自动展开折叠面板并选中第一个树节点的实现
Aug 24 HTML / CSS
CSS使用伪类控制边框长度的方法
Jan 18 HTML / CSS
CSS实现鼠标悬浮动画特效
May 07 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操作文件类的函数代码(文件和文件夹创建,复制,移动和删除)
2011/11/10 PHP
JavaScript 常见对象类创建代码与优缺点分析
2009/12/07 Javascript
IE下js调试工具Companion.JS
2010/10/15 Javascript
基于jQuery的前端数据通用验证库
2011/08/08 Javascript
关于event.cancelBubble和event.stopPropagation()的区别介绍
2011/12/11 Javascript
JavaScript生成GUID的多种算法小结
2013/08/18 Javascript
JS复制到剪贴板示例代码
2013/10/30 Javascript
node.js Web应用框架Express入门指南
2014/05/28 Javascript
jQuery DOM插入节点操作指南
2015/03/03 Javascript
Bootstrap企业网站实战项目4
2016/10/14 Javascript
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
2020/11/30 Javascript
jQuery中Datatables增加跳转到指定页功能
2017/02/08 Javascript
BootStrap表单时间选择器详解
2017/05/09 Javascript
微信小程序 动画的简单实例
2017/10/12 Javascript
浅谈vue-cli 3.0.x 初体验
2018/04/11 Javascript
详解Vue 多级组件透传新方法provide/inject
2018/05/09 Javascript
小程序实现投票进度条
2019/11/20 Javascript
js+css3实现炫酷时钟
2020/08/18 Javascript
关于numpy中np.nonzero()函数用法的详解
2017/02/07 Python
攻击者是如何将PHP Phar包伪装成图像以绕过文件类型检测的(推荐)
2018/10/11 Python
Windows系统下PhantomJS的安装和基本用法
2018/10/21 Python
pandas ix &amp;iloc &amp;loc的区别
2019/01/10 Python
与Django结合利用模型对上传图片预测的实例详解
2019/08/07 Python
Python字典底层实现原理详解
2019/12/18 Python
python爬虫开发之selenium模块详细使用方法与实例全解
2020/03/09 Python
Python+Appium实现自动化测试的使用步骤
2020/03/24 Python
Python日志logging模块功能与用法详解
2020/04/09 Python
在主流系统之上安装Pygame的方法
2020/05/20 Python
CSS3改变浏览器滚动条样式
2019/01/04 HTML / CSS
丝芙兰墨西哥官网:Sephora墨西哥
2020/05/30 全球购物
Linux常见面试题
2016/10/04 面试题
法律进学校实施方案
2014/03/15 职场文书
乡镇网格化管理实施方案
2014/03/23 职场文书
付款委托书范本
2014/10/05 职场文书
2014年党建工作汇报材料
2014/10/27 职场文书
女性健康知识讲座主持词
2015/07/04 职场文书