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自由控制.可以在其 ...
随机推荐
- oracle表连接------>排序合并连接(Merge Sort Join)
排序合并连接 (Sort Merge Join)是一种两个表在做连接时用排序操作(Sort)和合并操作(Merge)来得到连接结果集的连接方法. 对于排序合并连接的优缺点及适用场景例如以下: a,通常 ...
- 用angularjs开发下一代web应用（二）：angularjs应用骨架（二）
1.浅谈非入侵式JavaScript <div ng-click="doSomething()">...</div>这些指令和原来的事件处理器有下面不同之处 ...
- Android开发：在onTouchEvent中处理任意时间的长按事件
Android提供了GestureDetector类来处理一些常用的手势操作,比如说 onLongPress,onFling 等.但这里不使用GestureDetector,而是直接在自定义View重 ...
- 使用JDBC进行数据库的事务操作(2)
本篇将讲诉如何使用JDBC进行数据库有关事务的操作.在上一篇博客中已经介绍了事务的概念,和在MySQL命令行窗口进行开启事务,提交事务以及回滚事务的操作. 似乎事务和批处理都可以一次同时执行多条SQL ...
- 2015 Multi-University Training Contest 1
最近真是太废柴了,题没做几道,也没学什么新知识,多校做了三场也没总结~诶!好好学吧! 多校第一场感觉被完虐...orz... Hdu 5288 OO’s Sequence 题目链接:http://ac ...
- 基于visual Studio2013解决面试题之0405和最大的子矩阵
题目
- jsp:setProperty
类声明: package test; public class Student { private int age; public int getAge() { return ...
- hdu 1387 Team Queue （链表）
题目大意: 不同的人在不同的队伍里,插入链表的时候假设这个链表里有他的队友,就把它放到最后一个队友的最后.假设没有队友,就把它放到整个链表的最后面. 出链表的时候把第一个人拿出来. 思路分析: 要模拟 ...
- 【Unity3D自学记录】Unity3D网络之Socket聊天室初探
首先创建一个服务端程序,这个程序就用VS的控制台程序做即可了. 代码例如以下: using System; using System.Collections.Generic; using System ...
- jfinal框架教程-学习笔记
jfinal框架教程-学习笔记 JFinal 是基于 Java 语言的极速 WEB + ORM 开发框架,其核心设计目标是开发迅速.代码量少.学习简单.功能强大.轻量级.易扩展.Restfu ...