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,当时,网页中只有两种对象可以拖放:图像和某些文本.拖动图像时,把鼠标放在图像上,按住鼠标不放就可以拖动它.拖动文本时,需要选中文本,然后可以像拖动图像一样拖动被选中的文 ...
随机推荐
- xcode-build/version-bump
# xcode-build-bump.sh # @desc Auto-increment the build number every time the project is run. # @usag ...
- AngularJS之WebAPi上传
AngularJS之WebAPi上传(十) 前言 前面一系列我们纯粹是讲AngularJS,在讲一门知识时我们应该结合之前所学综合起来来做一个小的例子,前面我们讲了在MVC中上传文件的例子,在本节 ...
- Qt之日志输出文件
在Qt开发过程当中经常使用qDebug等一些输出来调试程序,但是到了正式发布的时候,都会被注释或者删除,采用日志输出来代替. 做过项目的童鞋可能都使用过日志功能,以便有异常错误能够快速跟踪.定 ...
- window2003远程桌面“已达最大连接数”
使用命令行强制注销远程登录用户 Fri, 04/19/2013 - 09:29 - admin 来源地址: http://space.itpub.net/10067101/viewspace-6147 ...
- UVA 529 Addition Chains（迭代搜索）
Addition Chains An addition chain for n is an integer sequence with the following four propertie ...
- Swift - 设置程序的应用图标和启动界面
一个应用,无论发布到App Store,还是安装到用户的屏幕上,都需要一个标志性的图标.同时,在应用启动时也要有个启动画面,否则启动时将会是纯黑的屏幕. 1,在项目的“General”选项卡下的“Ap ...
- 【自由谈】城域网IPv6过渡技术——MAP技术（4）
本节接着回答MAP技术的第三个问题:“MAP-BR的Pool是如何实现?可靠性如何提升?” 在MAP域中通过将多个MAP-BR放在同一个Pool内实现负载分担和保护倒换的.同一个Pool中的每个MAP ...
- Android开发按返回键应用后台运行
@Override public boolean onKeyDown(int keyCode, KeyEvent event) { if (keyCode == KeyEvent.KEYCODE ...
- 【android】下载文件至本应用程序的file文件夹或者sdcard
一.推断是否有sdcard卡 //推断是否有SD卡 //ture:有SD卡 //false:没有SD卡 public boolean avaiableMedia(){ String status ...
- 什么是VSync
VSync是垂直同期(Vertical Synchronization)的简称.主要的思路是将你的FPS和显示器的刷新率同期起来.其目的是避免一种称之为"撕裂"的现象.再以下我将具 ...