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自由控制.可以在其 ...
随机推荐
- BaseActivity--上门啦
package com.fwpt.activity; import com.fwpt.entity.RyUserInfo; import com.fwpt.entity.SmlaUserinfo; i ...
- socket为send和recv设置超时时间
linux和windows下用setsockopt设置SO_SNDTIMEO,SO_RCVTIMEO的参数的一点区别 UDP的socket在某些情况:如对方关闭时,本地可能sendto不出去数据,然后 ...
- Android 事件处理
目的:通过全面的分析Android的鼠标和键盘事件.了解Android中如何接收和处理键盘和鼠标事件,以及如何用代码来产生事件. 主要学习内容: 1. 接收并处理鼠标事件:按下.弹起.移动.双击.长按 ...
- FZU 1894 (双端队列)
Problem 1894 志愿者选拔 Accept: 1166 Submit: 3683 Time Limit: 1500 mSec Memory Limit : 32768 KB Pr ...
- 用js实现插入排序
话不多说,直接上代码 html源码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- Problem B: Ternarian Weights
大致题意:使用三进制砝码采取相应的措施衡量出给定的数字主要思路:三进制,如果 大于 2 向前进位,之前一直没写好放弃了,这次终于写好了…… #include <iostream> #inc ...
- Swift Swift语言Storyboard教程：第二部
本文由CocoaChina翻译小组@TurtleFromMars翻译自raywenderlich,原文:Storyboards Tutorial in Swift: Part 2 更新记录:该Stor ...
- XML wsdl soap xslt xsl ide
XML wsdl soap xslt xsl ide 作者Attilax , EMAIL:1466519819@qq.com 来源:attilax的专栏 地址:http://blog.csdn. ...
- 编写在浏览器中不弹出警告的ActiveX控件
我们在编写ActiveX控件时,如果用在浏览器中,经常都会弹出现在运行的脚本不安全的提示, 如果给客户使用,将会带来极大不便.按照MSDN的介绍通常有两种一种是实现IObjectSafe接口,一种是通 ...
- json转换成list map集合
import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Set; i ...