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,当时,网页中只有两种对象可以拖放:图像和某些文本.拖动图像时,把鼠标放在图像上,按住鼠标不放就可以拖动它.拖动文本时,需要选中文本,然后可以像拖动图像一样拖动被选中的文 ...
随机推荐
- actor简介
今天抽时间,给team做了一次actor介绍,现附上ppt actor 简介及应用
- HDU 3328 Flipper （stack）
最近着手打基础,做做STL的题目,虽然一般STL题目难度不大,但需要加快速度的准确率............................. 本题有N张牌,一开始每个位置一张(正面朝上或者朝下),有 ...
- Swift - 使用set，get确保索引加减在正常的范围内
通过类的计算属性set和get,我们可以对索引的加减进行保护.下面是一个样例,索引index初始值是0,有效范围是0~2.不管是index++还是index--,索引都是一直在这个范围能循环遍历. 1 ...
- ubuntu环境ceph配置入门(一)
环境:ubuntu server 14.04 64bit,安装ceph版本号0.79 正常情况下应有多个主机,这里为了高速入门以一台主机为例,多台主机配置方式类似. 1. 配置静态IP及主机名 静态I ...
- CPU 球迷助威清理灰尘图形的全过程
主机因为使用时间长的电源风扇,风扇轴承石油枯竭,导致拒绝或不转的风扇转速,热量使电源不能得到有效排除,往往会造成电脑死机,有几种方法来解决. 单省钱的办法例如以下: 1.把电源从主机上拆下,例如以下图 ...
- [Java 8] (6) Lambda与资源管理
资源处理 Java本身自带了垃圾回收(Garbage Collection)功能.可是仅仅有垃圾回收的目标是内部资源(Internal Resource),典型的比方堆上分配的内存区域等.对于外部资源 ...
- wiki 3143 二叉树的前序、中序及后序遍历
先序遍历:訪问根.遍历左子树.遍历右子树,简称:DLR. 中序遍历:遍历左子树,訪问根,遍历右子树,简称:LDR. 后序遍历:遍历左子树,遍历右子树.訪问根.简称:LRD. 数组搞的: #pragma ...
- javascript中使用Map
mis.comm.js.Map = function() { this.elements = new Array(); //获取MAP元素个数 this.size = function() { ret ...
- Linux入门基础 #9：管道及重定向
本文出自 http://blog.csdn.net/shuangde800 ------------------------------------------------------------ ...
- Button UI Kit CSS3美丽Buttonbutton
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...