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,当时,网页中只有两种对象可以拖放:图像和某些文本.拖动图像时,把鼠标放在图像上,按住鼠标不放就可以拖动它.拖动文本时,需要选中文本,然后可以像拖动图像一样拖动被选中的文 ...
随机推荐
- (转载)QT中PRO文件写法的详细介绍，很有用，很重要！
版权声明:本文为博主原创文章,未经博主允许不得转载. 在QT中,有一个工具qmake可以生成一个makefile文件,它是由.pro文件生成而来的,.pro文件的写法如下: 1. 注释从“#”开始,到 ...
- 使用iframe设置frameset的高度
index.html的页面代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "htt ...
- java按值传递理解（转）
ava没有引用传递只有按值传递,没有引用传递只有按值传递,值传递. 通过下面代码解释: 1 public class Test { 2 public static void main(String[] ...
- Eclipse完美汉化教程
首先我们打开http://www.eclipse.org/babel/downloads.php下载语言包. 方法一:可以复制图片里的地址通过Eclipse下载,Help→Install New So ...
- 使用gradle打包jar包
近期用android studio来做android开发的IDE,它是使用gradle来构建的,于是開始学习gradle. 如今有一个项目,里面有一个android-library的模块.我想在做re ...
- Python中的继承
继承: 面向对象程序语言的一个重要特点是继承.继承提供了在已存在类的基础上创建新类的方法.继承的子类 拥有被继承的父类的所有方法,在此基础上,子类还可以添加自己的专有方法.继承是类的强有力的特点.一些 ...
- 【慎思堂】之JS牛腩总结
一 JS基础 1-定义 Javascript是一种脚本语言/描述语言,是一种解释性语言.用于开发交互式web网页,使得网页和用户之间实现了一种实时性的.动态的.交互性的关系,使网页包含更多活跃的元素和 ...
- 通过崩溃地址找错误行数之Delphi版
通过崩溃地址找错误行数之Delphi版2009-5-11 17:42:35 来源: 转载 作者:网络 访问:360 次 被顶:2 次 字号:[大 中 小]核心提示:什么是 MAP 文件?简单地讲, M ...
- boost::asio设置同步连接超时
boost::asio设置同步连接超时 CSDN上求助无果,只好用自创的非主流方法了.asio自带的例子里是用deadline_timer的async_wait方法来实现超时的,这种方法需要单独写 ...
- windows消息处理（强烈推荐，收藏）
由于看了一下,比较好理解,暂时先放到这里,待有空再翻译.只是在每节后大致介绍一下讲的内容. 感觉写的比较全,无论从消息的原理还是从MFC操作上来说,值得一看,我也在此做个收藏. (一) 说明:以下首先 ...