HTML5 drag & drop 拖拽与拖放简介
- DataTransfer 对象:退拽对象用来传递的媒介,使用一般为Event.dataTransfer。
- draggable 属性:就是标签元素要设置draggable=true,否则不会有效果,例如:
<div title="拖拽我" draggable="true">列表1</div>
- ondragstart 事件:当拖拽元素开始被拖拽的时候触发的事件,此事件作用在被拖曳元素上
- ondragenter 事件:当拖曳元素进入目标元素的时候触发的事件,此事件作用在目标元素上
- ondragover 事件:拖拽元素在目标元素上移动的时候触发的事件,此事件作用在目标元素上
- ondrop 事件:被拖拽的元素在目标元素上同时鼠标放开触发的事件,此事件作用在目标元素上
- ondragend 事件:当拖拽完成后触发的事件,此事件作用在被拖曳元素上
- Event.preventDefault() 方法:阻止默认的些事件方法等执行。在ondragover中一定要执行preventDefault(),否则ondrop事件不会被触发。另外,如果是从其他应用软件或是文件中拖东西进来,尤其是图片的时候,默认的动作是显示这个图片或是相关信息,并不是真的执行drop。此时需要用用document的ondragover事件把它直接干掉。
- Event.effectAllowed 属性:就是拖拽的效果。
---------------------------------------------------
dragstart
Drag event starts.
drag
During the drag operation.
dragenter
Drag is over the target; used to determine if target will accept drop.
dragover
Drag is over target; used to determine feedback to user.
drop
Drop occurs.
dragleave
Drag leaves target.
dragend
Drag operation ends.
拖放事件
通过拖放事件,可以控制拖放相关的各个方面。其中最关键的地方在于确定那里发生了拖放事件,有些事件是在被拖动的元素上触发的,而有些事件是在放置目标上触发的。拖动某些元素时,将一次触发下列事件:
- dragstart
- drag
- dragend
按下鼠标键并开始移动鼠标时,会在被拖放的元素上触发dragstart事件。此时光标变成“不能放”符号(圆环中有一条反斜线),表示不能把元素放到自己上面。拖动开始时,可以通过ondragstart事件处理程序来运行JavaScript代码。
触发dragstart事件后,随即会触发drag事件,而且在元素被拖动期间会持续发送该事件。这个事件与mousemove事件相似,在鼠标移动过程中,mousemove事件也会持续发生。当拖动停止时(无论是把元素放到了有效的放置目标,还是放到了无效的放置目标上),会触发dragend事件。
上述三个事件的目标都是被拖动的元素。默认情况下,浏览器不会在拖动期间改变被拖动元素的外观,但你可以自己修改。不过,大多数浏览器会为正被拖动的元素创建一个半透明的副本,这个副本始终跟随着光标移动。
当元素被拖放到一个有效的放置目标上时,下列事件会依次发生:
- dragenter
- dragover
- dragleave或drop
只要元素被拖动到放置目标上,就会触发dragenter事件(类似于mouseover事件)。紧随其后的是dragover事件,而且被拖动的元素还在放置目标的范围内移动时,就会持续触发该事件。如果元素被拖出了放置目标,dragover事件不再发生,但会触发dragleave事件(类似于mouseout事件)。如果元素被放到了放置目标中,则会触发drop事件而不是dragleave事件。上述三个事件的目标都是作为放置目标的元素。
dataTransfer对象
只有简单的拖放而没有数据变化是没有什么用的。为了在拖放操作时实现数据交换,IE 5引入了dataTransfer对象,它是事件对象的一个属性,用于从被拖动元素向放置目标传递字符串格式的数据。因为它是事件对象的属性,所以只能在拖放事件的事件处理程序中访问dataTransfer对象。在事件处理程序中,可以使用这个对象的属性和方法来 完善拖放功能。目前,HTML5规范草案也收入了dataTransfer对象。
dataTransfer对象有两个主要方法: getData()和setData()。不难想象,getData()可以取得由setData()保存的值。setData()方法的第一个参数,也是getDAta()方法唯一的一个参数,是一个字符串,表示保存的数据类型,取值为”text”或“URL”,如下所示:
//设置和接收文本数据
event.dataTransfer.setDAta("text", "some text");
var text = event.dataTransfer.getData("text"); //设置和接收URL
event.dataTransfer.setData("URL", "HTML://www.w3cmm.com/"); 实例:
<!DOCTYPE html>
<html>
<head>
<script>
window.onload=function () {
var one=document.getElementById("one");
var two=document.getElementById("two");
//拖拽物体的事件
two.ondragstart=function (e) {
e.dataTransfer.setData("Text","后盾网");
one.innerHTML="开始";
}
two.ondrag=function () {
// one.innerHTML+="移动";
}
two.ondragend=function () {
one.innerHTML+="完成";
}
//投放区的事件
one.ondragenter=function (e) {
one.innerHTML+="进入";
e.preventDefault();
}
one.ondragover=function (e) {
//one.innerHTML+="移动";
e.preventDefault();
}
one.ondragleave=function (e) {
one.innerHTML+="离开";
e.preventDefault();
}
one.ondrop=function (e) {
e.preventDefault();
alert(e.dataTransfer.getData("Text"))
one.appendChild(two);
}
}
</script>
</head>
<body>
<div id="one">
</div>
<div id="two" draggable=true>
请拖拽我
</div>
</body>
</html>
HTML5 drag & drop 拖拽与拖放简介的更多相关文章
- HTML5 drag & drop 拖拽与拖放
关键词: 1. draggable:规定元素是否可拖动的,draggable=true可拖动 2. dataTransfer:拖拽对象用来传递的媒介,使用方式:event.dataTransfer 3 ...
- atitit.D&D drag&drop拖拽文件到界面功能 html5 web 跟个java swing c#.net c++ 的总结
atitit.D&D drag&drop拖拽文件到界面功能 html5 web 跟个java swing c#.net c++ 的总结 1. DND的操作流程 1 2. Html5 注 ...
- Atitit。D&D drag&drop拖拽功能c#.net java swing的对比与实现总结
Atitit.D&D drag&drop拖拽功能c#.net java swing的对比与实现总结 1. 实现一个D&D操作一般包括三个步骤: 1 2. .net黑头的拖曳机制 ...
- HTML5中的拖拽与拖放(drag&&drop)
1.drag 当拖动某个元素时,将会依次触发下列事件: 1)dragstart:按下鼠标键并开始移动鼠标时,会触发该事件 2)drag:dragstart触发后,随即便触发drag事件,而且在元素被拖 ...
- html5 drag 文件拖拽浅淡
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- [转]人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata)
人人网首页拖拽上传详解(HTML5 Drag&Drop.FileReader API.formdata) 2011年12月11日 | 彬Go 上一篇:给力的 Google HTML5 训练营( ...
- html5 Sortable.js 拖拽排序源码分析
最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的. 本帖属于原创,转载请出名出处. 官网http:// ...
- HTML5多图片拖拽上传带进度条
前言 昨天利用css2的clip属性实现了网页进度条觉得还不错,但是很多情况下,我们在那些时候用进度条呢,一般网页加载的时候如果有需要可以用,那么问题就来了,怎么才算整个加载完毕呢,是页面主要模块加载 ...
- HTML5 drag & drop & H5 DnD
HTML5 drag & drop H5 DnD https://html5demos.com/ demos https://html5demos.com/dnd-upload https:/ ...
随机推荐
- Tao 1.2.0图形框架发布
Tao 1.2.0图形框架发布 Tao图形框架是方便在Mono和.Net环境下进行游戏相关开发的库绑定和实用工具集.目前,对以下库提供支持: Cg - [Cg website] Dev ...
- 面向对象设计原则OO
面向对象设计原则是OOPS(Object-Oriented Programming System,面向对象的程序设计系统)编程的核心,但大多数Java程序员追逐像Singleton.Decorator ...
- Jordan Lecture Note-12: Kernel典型相关分析(Kernel Canonical Correlation Analysis, KCCA).
Kernel典型相关分析 (一)KCCA 同样,我们可以引入Kernel函数,通过非线性的坐标变换达到之前CCA所寻求的目标.首先,假设映射$\Phi_X: x\rightarrow \Phi_X(x ...
- RTB广告展示分步说明
原文:http://contest.ipinyou.com/cn/manual.shtml RTB (Real Time Bidding, 实时竞价) 是近年来计算广告领域最激动人心的进展之一. 它增 ...
- zend studio 函数不提醒 小黄图标 小黄标
在用 Zend Studio 编写 PHP 项目时发现调用系统函数时调试正常, 但是在编写代码时却提示函数未定义"Call to undefined function ", 在左侧 ...
- 分布式文件系统之GPFS
GPFS是IBM公司通过完善和发展其Tiger Shark文件系统发展而来.GPFS通过共享磁盘结构来实现其强大的扩展性.一个GPFS系统由许多集群节点组成,GPFS文件系统和应用程序在上面运行.这些 ...
- c语言数组的初始化
#include "stdio.h" int main() { ][]; a[][]="1,2,3,4,5,6,7,8,9,10,11,12"; ]=a,*p= ...
- Python刷票小脚本——网络人气奖?不好意思,我要了
零.前言 最近参加微软的kinect大赛,报名之后发现有一个网络投票,票数最多的项目可以得到网络人气奖. 这种事,必然是要搞一搞! 说干就干. 说明:由于本人过于懒惰,所以就不截图了,让大家失望了! ...
- javaweb学习总结二十三(servlet开发之线程安全问题)
一:servlet线程安全问题发生的条件 如果多个客户端访问同一个servlet时,发生线程安全问题,那么它们访问的是相同的资源.如果访问 的不是相同资源,则不存在线程安全问题. 实例1:不会产生线程 ...
- java通过反射获取调用变量以及方法
一:反射概念 可以通过Class类获取某个类的成员变量以及方法,并且调用之. 二:通过反射获取方法.变量.构造方法 @Test // 通过反射获取类定义的方法 public void testMeth ...