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自由控制.可以在其 ...
随机推荐
- 删除workspace下的vss的scc文件
public class DeleteAA { public static void main(String[] args) { DeleteAA aa=new DeleteAA(); aa.dele ...
- [置顶] Android框架攻击之Fragment注入
为了适应越来越大的设备屏幕,Android在3.X后引入了Fragment概念,作用是可以在一个屏幕上同时显示多个Activity,以达到充分利用屏幕的目的.关于Fragment的使用说明,可以阅读& ...
- wxpython 32 位 ，python 64 位问题
在安装Python Wxpython模块后,导入包的时候,会提示不支持64位的支持,需要安装Pythons 32 位,或者强制,使用Python 32 模式运行即可 在终端输入: defaults w ...
- 基于visual Studio2013解决C语言竞赛题之1059最大平台
题目 解决代码及点评 /* 功能:编写求最大平台问题的程序. 有n个整数a1,a2, ... an, 若满足a1≤a2≤ ... ≤ an , 则认为在这n个数中有最大平台.在这种情 ...
- linux下nginx负载均衡部署
nginx负载均衡部署 Nginx("engine x") 是一个高性能的 HTTP 和 反向代理 server,也是一个 IMAP/POP3/SMTP 代理server. Ngi ...
- JS - 提示是否删除
1. OnClientClick="return confirm('确定要删除吗?') 2.自定义函数: 函数: <script type ="text/javascript ...
- span设置固定宽度
<span> 标签是被用来组合文档中的行内元素.相信对一般的网页设计师来讲是非常熟悉的朋友了,使用相当频繁,但我们往往很少对SPAN设定样式,一般也没什么必要,大多数都留给DIV老朋友了. ...
- Android 通过wifi调试程序【转】
1.首先让android手机监听指定的端口: 这一步需要使用shell,因此手机上要有终端模拟器,不过网上很多,随便找个就行了,依次敲入下列几行: ? su//获取root权限 setprop ser ...
- JavaScript闭包(closure)入门: 拿"开发部"和"技术牛"举个例子
虽然只是一小段菜鸟的学习笔记 , 不过还是希望看到的高手看到不足的时候帮忙指点~ 一:代码和执行过程 /** * http://blog.csdn.net/ruantao1989 * ==>Ju ...
- POJ 1273 Drainage Ditches（网络流，最大流）
Description Every time it rains on Farmer John's fields, a pond forms over Bessie's favorite clover ...