自学HTML5第三节(拖放效果)
今天来看看网页上的拖放效果,首先来看看什么是拖放————
拖放
拖放是一种常见的特性,即抓取对象以后拖到另一个位置。
在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。
浏览器支持
Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。
注释:在 Safari 5.1.2 中不支持拖放
html代码:
<!DOCTYPE HTML> <html> <head> <script type="text/javascript"> function allowDrop(ev) { ev.preventDefault(); }function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); }function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body><div id="div1" οndrοp="drop(event)" οndragοver="allowDrop(event)"></div> <img id="drag1" src="img_logo.gif" draggable="true" οndragstart="drag(event)" width="336" height="69" /></body> </html>
设置元素为可拖放
首先,为了使元素可拖动,把要拖动的元素,比如img标签元素里的 draggable 属性设置为 true :
<img draggable="true" />
然后,规定当元素被拖动时,会发生什么。
在上面的例子中,ondragstart 属性调用了一个函数,drag(event),它规定了被拖动的数据。
dataTransfer.setData() 方法设置被拖数据的数据类型和值:
function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); //在这个例子中,数据类型是 "Text",值是可拖动元素的 id ("drag1")。
}
ondragover 事件规定在何处放置被拖动的数据。
默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。
这要通过调用 ondragover 事件的 event.preventDefault() 方法:
event.preventDefault() //调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)
当放置被拖数据时,会发生 drop 事件。
在上面的例子中,ondrop 属性调用了一个函数,drop(event):
function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); //通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
ev.target.appendChild(document.getElementById(data));}
转载于:https://www.cnblogs.com/jxh-it/p/4012796.html
自学HTML5第三节(拖放效果)相关推荐
- html5如何实现拖拽,HTML5 如何实现拖放
拖放是一种常见的特性,也就是抓取对象以后拖到另一个位置.在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 拖放事件 拖放是由拖动与释放两部分组成,拖放事件也分为被拖动元素的相关事件,和容器 ...
- HTML5 如何实现拖放'N'拖放
在网络开发人员需要掌握的所有技术中,看起来最容易造成混淆和潜在问题的是拖拽. 这不是一项新技术,它已存在多年,但许多开发人员仍然执着于基于jQuery的旧方法,以牵连复杂(有时很慢且不准确)的拖放模拟 ...
- html实现全屏效果原理,HTML5 实现全屏效果
HTML5 实现全屏效果 点击进入全屏和点击退出全屏方法: //进入全屏 function requestFullScreen() { var de = document.documentElemen ...
- php柱状图html代码,html5生成柱状图(条形图)效果的实例代码
下面小编就为大家分享一篇html5生成柱状图(条形图)效果的实例代码.小编觉得挺不错的,现在分享给大家,也给大家一个参考.一起跟随小编过来看看吧 XML/HTML Code复制内容到剪贴板 (func ...
- HTML5实现刮奖效果
原文:HTML5实现刮奖效果 要实现刮奖效果,最重要的是要找到一种方法:当刮开上层的涂层是就能看到下层的结果.而HTML5的canvas API中有一个属性globalCompositeOperati ...
- html对话框跳转页面,html5各种页面切换效果和模态对话框用法总结
这篇文章主要为大家介绍了html5各种页面切换效果和模态对话框用法总结,较为详细的介绍了HTML5的各种页面元素的使用技巧,非常具有实用价值,需要的朋友可以参考下 本文详细总结了html5各种页面切换 ...
- html5css3菜鸟教程,HTML5+CSS3实现拖放(Drag and Drop)示例
本文简单介绍一下HTML5的拖放实现.MXGHTML5中文学习网 - HTML5先行者学习网 拖放(Drag 和 drop)是 HTML5 标准的组成部分.MXGHTML5中文学习网 - HTML5先 ...
- 怎么在html中加入特效文字,如何使用HTML5+css3实现粒子效果文字动画特效(附完整代码)...
我们在浏览web网页的时候会发现现在的网页做的越来越美观,很多动画特效做的越来越炫酷,这离不开HTML5和css3的深入开发.今天我们要来分享一款基于HTML5和css3的文字特效--粒子效果文字动画 ...
- 哈哈,又找到几个强大的html5+css3的动画效果
一周HTML5经典回顾 31个别出心裁的HTML5动画 40,425 人浏览 发表回复 13 又是一周即将过去,我们来精心挑选这周分享的31款别出心裁的HTML5动画,很多还比较实用,一起来看看吧. ...
最新文章
- flume 1.7在windows下的安装与运行
- ObjC block入门
- cocos2d-x学习笔记(十)android自动化打包bat脚本
- C#中的值类型和引用类型
- 【题目分析】1059 Prime Factors (25 分)
- 淘淘商城项目mysql服务器_SpringMVC+Spring+Mybatis+Mysql+Maven+Svn[ 淘淘商城项目环境搭建 ]...
- XMLHttpRequest状态码及相关事件
- kaggle(01)-泰坦尼克号问题
- 人事管理系统(毕业设计)
- c语言编程题作弊技巧,全国计算机二级C语言上机编程题详细分析(1)
- 企业微信绑定企业邮箱服务器配置,企业微信企业邮箱开通规则说明介绍
- 瑞利衰落的概念及应对技术——信道编码、交织、跳频
- 基于Python深度学习的DGA域名检测
- 直接学 Vue 3 吧 —— 对话 Vue.js 作者尤雨溪
- python modbus_tk模块学习笔记(rtu slaver例程)
- 读书笔记 ·《简约至上》第二章 明确认识
- 微信小程序 控制台报错net::ERR_UNSAFE_PORT
- web前端开发常用的10个高端CSS UI开源框架
- 如何获客:3招做好触客营销实现高效获
- java定义苹果类Apple_定义一个水果接口Fruit,里面定义一个表示吃水果的eat方法。定义一个苹果类Apple和一个橘子...
热门文章
- vscode 调试python 无法连接远程服务器_vscode 远程调试python的方法
- java xfire下载_XFIRE教程 PDF 下载
- 不得不看的17 个linux实用技巧
- 华为mate20 android,华为MateRS对比华为mate20RS,终于让安卓手机坐上了头等舱!
- 云栖回顾|首届阿里云云原生生态合作伙伴大会:与伙伴能力融合,加速企业数字创新
- Seata RPC 模块的重构之路
- K8s 实践 | 如何解决多租户集群的安全隔离问题?
- 平衡二叉树及其操作实现_平衡二叉树(AVL树)及C语言实现
- aix安装bff_AIX的yum安装
- C#学习Error问题:“System.NullReferenceException:未将对象引用设置到对象的实例”