1. DataTransfer 对象:退拽对象用来传递的媒介,使用一般为Event.dataTransfer。
  2. draggable 属性:就是标签元素要设置draggable=true,否则不会有效果,例如:
    <div title="拖拽我" draggable="true">列表1</div>
  3. ondragstart 事件:当拖拽元素开始被拖拽的时候触发的事件,此事件作用在被拖曳元素上
  4. ondragenter 事件:当拖曳元素进入目标元素的时候触发的事件,此事件作用在目标元素上
  5. ondragover 事件:拖拽元素在目标元素上移动的时候触发的事件,此事件作用在目标元素上
  6. ondrop 事件:被拖拽的元素在目标元素上同时鼠标放开触发的事件,此事件作用在目标元素上
  7. ondragend 事件:当拖拽完成后触发的事件,此事件作用在被拖曳元素上
  8. Event.preventDefault() 方法:阻止默认的些事件方法等执行。在ondragover中一定要执行preventDefault(),否则ondrop事件不会被触发。另外,如果是从其他应用软件或是文件中拖东西进来,尤其是图片的时候,默认的动作是显示这个图片或是相关信息,并不是真的执行drop。此时需要用用document的ondragover事件把它直接干掉。
  9. 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.

拖放事件

通过拖放事件,可以控制拖放相关的各个方面。其中最关键的地方在于确定那里发生了拖放事件,有些事件是在被拖动的元素上触发的,而有些事件是在放置目标上触发的。拖动某些元素时,将一次触发下列事件:

  1. dragstart
  2. drag
  3. dragend

按下鼠标键并开始移动鼠标时,会在被拖放的元素上触发dragstart事件。此时光标变成“不能放”符号(圆环中有一条反斜线),表示不能把元素放到自己上面。拖动开始时,可以通过ondragstart事件处理程序来运行JavaScript代码。

触发dragstart事件后,随即会触发drag事件,而且在元素被拖动期间会持续发送该事件。这个事件与mousemove事件相似,在鼠标移动过程中,mousemove事件也会持续发生。当拖动停止时(无论是把元素放到了有效的放置目标,还是放到了无效的放置目标上),会触发dragend事件。

上述三个事件的目标都是被拖动的元素。默认情况下,浏览器不会在拖动期间改变被拖动元素的外观,但你可以自己修改。不过,大多数浏览器会为正被拖动的元素创建一个半透明的副本,这个副本始终跟随着光标移动。

当元素被拖放到一个有效的放置目标上时,下列事件会依次发生:

  1. dragenter
  2. dragover
  3. 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 拖拽与拖放简介的更多相关文章

  1. HTML5 drag & drop 拖拽与拖放

    关键词: 1. draggable:规定元素是否可拖动的,draggable=true可拖动 2. dataTransfer:拖拽对象用来传递的媒介,使用方式:event.dataTransfer 3 ...

  2. 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 注 ...

  3. Atitit。D&D drag&drop拖拽功能c#.net java swing的对比与实现总结

    Atitit.D&D drag&drop拖拽功能c#.net java swing的对比与实现总结 1. 实现一个D&D操作一般包括三个步骤: 1 2. .net黑头的拖曳机制 ...

  4. HTML5中的拖拽与拖放(drag&&drop)

    1.drag 当拖动某个元素时,将会依次触发下列事件: 1)dragstart:按下鼠标键并开始移动鼠标时,会触发该事件 2)drag:dragstart触发后,随即便触发drag事件,而且在元素被拖 ...

  5. html5 drag 文件拖拽浅淡

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. [转]人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata)

    人人网首页拖拽上传详解(HTML5 Drag&Drop.FileReader API.formdata) 2011年12月11日 | 彬Go 上一篇:给力的 Google HTML5 训练营( ...

  7. html5 Sortable.js 拖拽排序源码分析

    最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的.   本帖属于原创,转载请出名出处. 官网http:// ...

  8. HTML5多图片拖拽上传带进度条

    前言 昨天利用css2的clip属性实现了网页进度条觉得还不错,但是很多情况下,我们在那些时候用进度条呢,一般网页加载的时候如果有需要可以用,那么问题就来了,怎么才算整个加载完毕呢,是页面主要模块加载 ...

  9. HTML5 drag & drop & H5 DnD

    HTML5 drag & drop H5 DnD https://html5demos.com/ demos https://html5demos.com/dnd-upload https:/ ...

随机推荐

  1. Tao 1.2.0图形框架发布

    Tao 1.2.0图形框架发布         Tao图形框架是方便在Mono和.Net环境下进行游戏相关开发的库绑定和实用工具集.目前,对以下库提供支持: Cg - [Cg website] Dev ...

  2. 面向对象设计原则OO

    面向对象设计原则是OOPS(Object-Oriented Programming System,面向对象的程序设计系统)编程的核心,但大多数Java程序员追逐像Singleton.Decorator ...

  3. Jordan Lecture Note-12: Kernel典型相关分析(Kernel Canonical Correlation Analysis, KCCA).

    Kernel典型相关分析 (一)KCCA 同样,我们可以引入Kernel函数,通过非线性的坐标变换达到之前CCA所寻求的目标.首先,假设映射$\Phi_X: x\rightarrow \Phi_X(x ...

  4. RTB广告展示分步说明

    原文:http://contest.ipinyou.com/cn/manual.shtml RTB (Real Time Bidding, 实时竞价) 是近年来计算广告领域最激动人心的进展之一. 它增 ...

  5. zend studio 函数不提醒 小黄图标 小黄标

    在用 Zend Studio 编写 PHP 项目时发现调用系统函数时调试正常, 但是在编写代码时却提示函数未定义"Call to undefined function ", 在左侧 ...

  6. 分布式文件系统之GPFS

    GPFS是IBM公司通过完善和发展其Tiger Shark文件系统发展而来.GPFS通过共享磁盘结构来实现其强大的扩展性.一个GPFS系统由许多集群节点组成,GPFS文件系统和应用程序在上面运行.这些 ...

  7. c语言数组的初始化

    #include "stdio.h" int main() { ][]; a[][]="1,2,3,4,5,6,7,8,9,10,11,12"; ]=a,*p= ...

  8. Python刷票小脚本——网络人气奖?不好意思,我要了

    零.前言 最近参加微软的kinect大赛,报名之后发现有一个网络投票,票数最多的项目可以得到网络人气奖. 这种事,必然是要搞一搞! 说干就干. 说明:由于本人过于懒惰,所以就不截图了,让大家失望了! ...

  9. javaweb学习总结二十三(servlet开发之线程安全问题)

    一:servlet线程安全问题发生的条件 如果多个客户端访问同一个servlet时,发生线程安全问题,那么它们访问的是相同的资源.如果访问 的不是相同资源,则不存在线程安全问题. 实例1:不会产生线程 ...

  10. java通过反射获取调用变量以及方法

    一:反射概念 可以通过Class类获取某个类的成员变量以及方法,并且调用之. 二:通过反射获取方法.变量.构造方法 @Test // 通过反射获取类定义的方法 public void testMeth ...