转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/31413767

本来准备写一个支持多图片拖拽上传的例子,但是为了更好的理解,先介绍一下HTML5的拖放。

拖放(Drag 和 drop)是 HTML5 标准的组成部分。

浏览器支持

Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。

被拖元素,dragElement :

1、添加事件:ondragstart

2、添加属性:dragable

放置元素,dropElement:

1、添加事件:ondargenter , ondragover , ondragleave , ondragend ,ondrop

和mouser划入划出一类的事件很类似,字面也很好理解,不赘述了,下面会用例子来说明。

1、页面上元素间的拖放

下面用个小例子,div间的拖放来展示,各个事件如何被触发:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/> <style type="text/css"> #dropEle
div
{
float: left;
} </style> <script src="../../jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> /**
* 拖放(Drag 和 drop)是 HTML5 标准的组成部分。
* 浏览器支持
*Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。
*/
$(function ()
{
$("#dragEle")[0].ondragstart = function (event)
{
console.log("dragStart");
event.dataTransfer.setData("Text", event.target.id);
}; /**
* 当放置被拖数据时,会发生 drop 事件。
* 调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)
* @param event
*/
$("#dropEle")[0].ondrop = function (event)
{
/* for (var p in event.dataTransfer)
{
console.log(p + " = " + event.dataTransfer[p] + " @@");
}
*/
console.log("onDrop");
var id = event.dataTransfer.getData("Text");
$(this).append($("#" + id).clone().text($(this).find("div").length));
event.preventDefault();
}; /**
* ondragover 事件规定在何处放置被拖动的数据。
*默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。
*/
$("#dropEle")[0].ondragover = function (event)
{
console.log("onDrop over");
event.preventDefault();
} $("#dropEle")[0].ondragenter = function (event)
{
console.log("onDrop enter");
} $("#dropEle")[0].ondragleave = function (event)
{
console.log("onDrop leave");
} $("#dropEle")[0].ondragend = function (event)
{
console.log("onDrop end");
} }); </script> </head>
<body> <div style="border: 1px solid red ; width: 100px ; height: 100px ;text-align: center;line-height: 100px;"
draggable="true" id="dragEle" > </div> <div style="width: 330px;min-height: 202px;border: 1px solid #444;margin-top: 20px;overflow-y: scroll;"
id="dropEle"></div> </body>
</html>

效果图:

效果图注意看下console面板的输出:观察每个事件何时被触发。

需要注意几点:

a、ondragover中必须组织事件的默认行为,默认地,无法将数据/元素放置到其他元素中。

b、drop 事件的默认行为是以链接形式打开,所以也需要阻止其默认行为。

还有可能注意到:在拖放时,event中包含一个event.dataTransfer 对象,上例中我们使用了该对象的setData方法传递了拖动div的id,然后在drop中取得该id,并且复制了该元素添加到放置的div中。

下面介绍下该对象的其他方法:

event.dataTransfer :

items = [object DataTransferItemList] @@drag_drop.html:44
files = [object FileList] @@drag_drop.html:44
types = text/plain @@drag_drop.html:44
effectAllowed = all @@drag_drop.html:44
dropEffect = none @@drag_drop.html:44
clearData = function clearData() { [native code] } @@drag_drop.html:44
getData = function getData() { [native code] } @@drag_drop.html:44
setData = function setData() { [native code] } @@drag_drop.html:44
setDragImage = function setDragImage() { [native code] } @@

我使用了js打印出了它所有的属性:

1、getData,setData上例已经使用了,clearData就是清除设置的数据。

2、值得注意的是files,当把操作系统中选择的一个或多个文件拖入该div中,files中会存储拖入文件的信息,然后我们通过file可以得到文件的类型,长度,内容然后实现上传。

3、setDragImage(image, x, y)用于设置鼠标移动过程中随鼠标一起移动的效果图。必须在dragstart中设置。

4、types,effectAllowed和dropEffect分别是拖入元素的类型,拖拽过程中鼠标显示的样式,我觉得可以忽略了这几个属性,一般用不到。

版权声明:本文为博主原创文章,未经博主允许不得转载。

HTML5 CSS3 专题 : 拖放 (Drag and Drop)的更多相关文章

  1. HTML5 CSS3 专题 :诱人的实例 3D旋转木马效果相册

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/32964301 首先说明一下创意的出处:http://www.zhangxinxu ...

  2. HTML5 CSS3 专题 :诱人的实例 3D旋转木马效果相冊

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/32964301 首先说明一下创意的出处:http://www.zhangxinxu ...

  3. HTML5 之拖放(drag与drop)

    拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. HTML5 拖放实例 ...

  4. HTML5(四)Drag and Drop

    HTML5 拖放(Drag 和 Drop) 拖放 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 设置元素为可拖放 首先,为了使元素 ...

  5. HTML5 CSS3专题 诱人的实例 CSS3打造百度贴吧的3D翻牌效果

    首先感谢w3cfuns的老师~ 今天给大家带来一个CSS3制作的翻牌效果,就是鼠标移到元素上,感觉可以看到元素背后的信息.大家如果制作考验记忆力的连连看.扑克类的游戏神马的,甚至给女朋友写一些话语,放 ...

  6. 拖放(Drag和Drop)--html5

    拖放,就是抓取一个对象后拖放到另一个位置.很常用的一个功能,在还没有html5的时候,我们实现这个功能,通常会用大量的js代码,再利用mousemove,mouseup等鼠标事件来实现,总的来说比较麻 ...

  7. HTML5 拖放---drag和drop

    拖放四步走:第一步:设置元素可拖放,即把 draggable属性设置为 true:  例:<div id="div" draggable="true"&g ...

  8. HTML5拖拽/拖放(drag &amp; drop)详解

    H5中拖拽属性: draggable: auto | true | false   拖动事件:   - dragstart 在元素开始被拖动时触发 - dragend 在拖动操作完成时触发 - dra ...

  9. HTML 5 拖放(Drag 和drop)

    浏览器支持 Internet Explorer 9.Firefox.Opera 12.Chrome 以及 Safari 5. 1.把标签 draggable 属性设置为 true. 2.向标签添加on ...

随机推荐

  1. 高仿ios版美团框架项目源码

    高仿美团框架基本已搭好.代码简单易懂,适合新人.适合新人.新人. <ignore_js_op>     源码你可以到ios教程网那里下载吧,这里我就不上传了,http://ios.662p ...

  2. 万能的林萧说:一篇文章教会你,如何做到招聘要求中的“要有扎实的Java基础”。

    来历 本文来自于一次和群里猿友的交流,具体的情况且听LZ慢慢道来. 一日,LZ在群里发话,"招人啦." 然某群友曰,"群主,俺想去." LZ回之,"你 ...

  3. CDN -- 集合

    weui https://cdnjs.cloudflare.com/ajax/libs/weui/0.4.3/style/weui.min.css 百度静态资源库 http://cdn.code.ba ...

  4. cornerstone 使用

    svn 使用方法 Check Out 下载的文件会与源文件产生一个working copy与源文件关联

  5. Runtime的用法

    public class RuntimeTest { public static void main(String[] args) { Runtime run =Runtime.getRuntime( ...

  6. 获取json对象的id或者根据name获取id

    --用json的时候,知道id获取对应的name或者相反根据name获取id --内核代码 <script> var products=[{ID:1,Name:"a", ...

  7. scala中常用但其他语言不常见的符号含义

    本文旨在介绍Scala在其他语言中不太常见的符号含义,帮助理解Scala Code. 随着我对Scala学习的深入,我会不断增加该篇博文的内容. 修改记录 ----2016.11.23  新增scal ...

  8. 在windows搭建react-native android 开发环境总结

    1.安装必须的软件 1.Python 2    注意勾选 Add python.exe to Path,选项,这样就可以在安装完成后,不用手动去添加环境变量    安装完,打开cmd.exe,输入py ...

  9. phpcms后台管理

    phpcms从网上下载就好了,记住这个要安装在Wamp中的www文件下 从网页输入网址进入后台控制 输入密码账号,即进入后台控制界面: 后台管理有自带的网页模板把他换成自己的模板: 修改站点:   把 ...

  10. javascript之fill()方法

    无意中看到fill这个方法,有些不解,起初以为是人家自定义的方法,后来才发觉原来不是,javascript里面是真的有这个方法,于是特地学习了下. fill()方法的作用是使用一个固定值来替换数组中的 ...