HTML5之画布的拖拽/拖放
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function allowDrop(ev){
ev.preventDeafault();
}
function drag(ev){
ev.dataTranster.setData("Text",ev.target.id);
}
function drop(ev){
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}
</script>
</head>
<body>
<div id ="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69" />
</body>
</html>
使得一个元素能够拖动
很easy。仅仅须要将一个元素的拖动属性改动为draggable，例如以下：
- <img draggable="true" />
怎样拖动 - ondragstart() 和 setData()方法
然后，我们指定当一个元素拖动的时候会运行的操作。
在上面的演示中。ondragstart属性调用了一个方法， drag(event)。这里指定了那个数据被拖动。
dataTransfer.setData()方法设置了数据类型和被拖动的数据：
- function drag(ev){
- ev.dataTransfer.setData("Text",ev.target.id);
- }
在这里样例中。data type是"Text"，数值是被拖动元素的ID。
哪里去放置(drop) - ondragover
ondragover事件指定了拖动的元素能够被放置的位置。
缺省，数据/元素不能被drop到另外的元素。 为了同意drop，你须要先阻止缺省的处理方式。我们能够调用event.preventDefault()方法，例如以下：
- event.preventDefault()
运行放置(drop)
当可拖动的数据被drop的时候，drop事件触发。
在上面的样例中。ondrop属性能够调用一个方法。drop(event)：
- function drop(ev)
- {
- var data=ev.dataTransfer.getData("Text");
- ev.target.appendChild(document.getElementById(data));
- ev.preventDefault();
- }
以上代码：
- 使用dataTransfer.getData("Text")得到被拖动的数据。这种方法将会返回setData()方法中设置的不论什么数据。
- 被拖动的数据是能够拖动元素("drag1")的id
- 加入可拖动的元素到放置的元素
- 调用preventDefault()方法来阻止浏览器的缺省数据处理方式(比如，打开链接)
HTML5之画布的拖拽/拖放的更多相关文章
- HTML5应用之文件拖拽上传
使用HTML5的文件API,可以将操作系统中的文件拖放到浏览器的指定区域,实现文件上传到服务器.本文将结合实例讲解HTML5+jQuery+PHP实现拖拽上传图片的过程,来看下HTML5的魅力吧. H ...
- 11个好用的jQuery拖拽拖放插件
这次我们整理一些拖拽播放类型的jQuery插件,这些可能不是很常用,但偶尔会有网站设计项目用到,特别是后台相关的开发项目,这个拖放排序功能一般都会有,所以适合大家收藏起来,方便日后使用.接下来一起看盾 ...
- 超炫HTML5 SVG聊天框拖拽弹性摇摆动画特效
这是一款很有创意的HTML5 SVG聊天框拖拽弹性摇摆动画特效. 用户能够用鼠标点击或用手滑动聊天框上的指定区域,该区域会以很有弹性的弹簧效果拉开聊天用户列表.点击一个用户头像后.又以同样的弹性特效切 ...
- HTML5原生拖拽/拖放⎡Drag & Drop⎦详解
前言 拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准的一部分.我从几个方面学习并实践这个功能. 拖放的流程 ...
- HTML5原生拖拽/拖放(drag & drop)详解
前言 拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准的一部分.我从几个方面学习并实践这个功能. 拖放的流程 ...
- HTML5拖拽/拖放(drag & drop)详解
H5中拖拽属性: draggable: auto | true | false 拖动事件: - dragstart 在元素开始被拖动时触发 - dragend 在拖动操作完成时触发 - dra ...
- 原生拖拽,拖放事件(drag and drop)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 从零开始学 Web 之 HTML5（四）拖拽接口，Web存储，自定义播放器
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- HTML5新特性之Canvas+drag(拖拽图像实现图像反转)
1.什么是canvas 在网页上使用canvas元素时,会创建一块矩形区域,默认矩形区域宽度300px,高度150px.. 页面中加入canvas元素后,可以通过javascript自由控制.可以在其 ...
随机推荐
- EasyUI DataGrid 中字段 formatter 格式化不起作用
今天用 EasyUI datagrid 来做列表,要对一些数据进行格式化,推断某字段状态时,发现 formatter 格式化相应的函数不起作用. <table id="list_dat ...
- oracle flashback 2
Flashback database After oracle 10g, oracle can rollback to an prior time by flashback databas ...
- APNS 那些事！
之前在消息推送中间件APush里实现了对APNS的桥接.并利用业余时间阅读了官方指南Local and Push Notification Programming Guide.蛮有心得的.稍作总结.分 ...
- Vertica数据库操作
删除主键(Vertica数据库的主键值并非唯一的): SELECT ANALYZE_CONSTRAINTS('fb_s.c_log'); 找到key名,再: ALTER TABLE fb_s.c_lo ...
- 浅谈C#中的泛型
1.什么是泛型? 泛型是程序设计语言的一种特性.允许程序员在强类型程序设计语言中编写 代码时定义一些可变部分,那些部分在使用前必须作出指明.各种程序设计语言和其编译器.运行环境对泛型的支持均不一样.将 ...
- Selenium Webdriver firefox 浏览器问题
Selenium Webdriver 在使用firefox 测试会牵扯到firefox的安装路径的问题 1.默认安装路径在c盘的情况下: WebDriver driver = new FirefoxD ...
- 【Demo 0008】Java基础-抽象类
本掌学习要点: 1. 了解抽象类的定义及使用场景: 2. 掌握final修饰的类.方法以及变量作用及用法: 3. 掌握abstract 修饰的类及方法作用及用 ...
- jquery prop和attr的区别
jquery1.6中新加了一个方法prop(),一直没用过它,官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值. 大家都知道有的浏览器只要写disabled,checked就可以了,而有的 ...
- Java基础：泛型及其擦除性、不可协变性
转载请注明出处:jiq•钦's technical Blog 1泛型语法: 泛型类: class ClassName<T>{} 泛型方法:public <T> void f(T ...
- PySide——Python图形化界面
PySide——Python图形化界面 PySide——Python图形化界面入门教程(四) PySide——Python图形化界面入门教程(四) ——创建自己的信号槽 ——Creating Your ...