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 拖动
触发的事件有:dragstart事件.drag事件和dragend事件. 按下鼠标键并开始移动鼠标的时候,会在被拖拽的元素上触发dragstart事件.这时候光标变成”不能放”符号(圆环中有一条反斜线 ...
- HTML5 中的拖放
今天,给大家整理一个html5 拖放. 首先,我们先了解一下什么是拖放? 拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HT ...
- HTML5学习笔记 拖放
拖放(Drag和drop)是html5标准的组成部分 拖放是一种常见的特性,即抓取对象以后拖到另一个位置 在html5中,拖放是标准一部分,任何元素都能够拖放. 设置元素为可拖放 首先,为了使元素可拖 ...
- HTML5中的拖放
关于HTML5中的拖放 拖放(Drag 和 Drop)是一种常见的特性,即抓取对象以后拖到另一个位置,在 HTML5 中,拖放是标准的组成部分.在HTML5中用户可以使用鼠标选择一个可拖动元素,将元素 ...
- selenium如何操作HTML5的画布canvas上的元素
话不多少,上图如下,下图红色框内是一个html5的画布,我们要像操作右上角的保存和数据视图的时候是无法公共selenium的普通定位操作到的,那该怎么办呢? 我们先new一个Selenium的acti ...
- js+css3+HTML5拖动滑块(type="range")改变值
最近在做一个H5的改版项目,产品和设计给出的效果中有一个拖动滑块可以改变输入值的效果,类似如下图这样: 拿到这样的设计稿后,我有点懵了,自己写一个js?去网上找一个这样的效果?自己写一个可以,只是实现 ...
- HTML5之画布的拖拽/拖放
<!DOCTYPE HTML> <html> <head> <script type="text/javascript"> func ...
- HTML5新增的拖放API---（一）
HTML5新增了关于拖放的API,通过API可以让HTML页面的任意元素都变成可拖动的,通过使用拖放机制可以开发出更友好的人机交互的界面. 拖放操作可以分为两个动作:在某个元素上按下鼠标移动鼠标(没有 ...
- HTML5新属性-----拖放
最早引入JS拖放功能的是IE4,当时,网页中只有两种对象可以拖放:图像和某些文本.拖动图像时,把鼠标放在图像上,按住鼠标不放就可以拖动它.拖动文本时,需要选中文本,然后可以像拖动图像一样拖动被选中的文 ...
随机推荐
- RS100项目进展更新
1. 添加手机界面访问网页,毕竟PDA的屏幕大小和PC机大小不一致,完成了一自适应网页,便于在手机上观看实时画面: 2. 此项目为一个远程视频监控+远程开关项目,远程PC机或者手机能操作到监控端的开关 ...
- HTTP协议--简析
HTTP--超文本传输协议(HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议,是所有的www文件都必须遵守的标准. 要想成为优秀的web开发人员,必须熟悉H ...
- Win2003 Server磁盘配额揭密之启用篇
Win2003 Server磁盘配额揭密之启用篇 ［ 作者:茶乡浪子 转贴自:it168.com 点击数:4973 更新时间:2005-1-17 ］ 本文要向大家介绍如何利用W ...
- 论文阅读笔记 - YARN : Architecture of Next Generation Apache Hadoop MapReduceFramework
作者:刘旭晖 Raymond 转载请注明出处 Email:colorant at 163.com BLOG:http://blog.csdn.net/colorant/ 更多论文阅读笔记 http:/ ...
- Linux下的链接文件
整理自<鸟哥的Linux私房菜>,整理者:华科小涛http://www.cnblogs.com/hust-ghtao/ Linux中的链接文件分为两种:硬链接和软链接.软链接(symbol ...
- Delphi 设置文件属性
复制代码uses FileCtrl; procedure TForm1.BitBtn1Click(Sender: TObject);begin with OpenDialog1 do if Execu ...
- spring mvc接收JSON格式的参数
1.配置spring解析json的库 <dependency> <groupId>org.codehaus.jackson</groupId> ...
- 利用Xtrabackup备份集合恢复一台从库的过程
1 time tar -xvf Open..tarx.gz real 35m22.502s user 10m16.499s sys 1m28.578s You have new m ...
- oracle切割字符串后以单列多行展示
原始的sql: select substr(field1, instr(field1, '|', 1, rownum) + 1, instr(field1, '|', 1, rownum + 1) - ...
- Android应用中使用百度地图API并加入标注（一）
网上一些资料这样的的内容已经过时了,这里是最新的内容,假设哪里不正确,请吐槽... 1)下载百度地图移动版API(Android)开发包 要在Android应用中使用百度地图API,就须要 ...