1、设置元素可拖拽属性:draggable

  • true表示可拖拽。
  • false表示不可拖拽。
  • auto默认值，img和带href属性的a标签则表示可拖拽，其他标签表示不可被拖拽。
  • 其他值表示不可拖拽。
  • 兼容FF：需要在ondragstart事件中设置ev.dataTransfer.setData("",""),元素才可以被拖拽。

2、拖拽元素事件：

  • dragstart：拖拽前触发，即鼠标按下，被拖拽元素被拖拽的瞬间触发。

    • event.dataTransfer的大部分设置均在这里配置
    • 若调用event.preventDefault()则会阻止拖拽行为，导致后续的拖拽事件不被触发
    • 触发dragstart事件后，其他元素的mousemove,mouseover,mouseenter,mouseleave,mouseout事件均不会被触发了
  • drag：拖拽前、拖拽结束之间连续触发，即使鼠标没有移动，只要未释放，都会触发。
  • dragend:拖拽结束触发，即释放鼠标触发。

3、目标元素事件：

  • dragenter：进入目标元素触发，相当于mouseover
  • dragover：被拖拽元素在目标元素上移动时触发，相当于mousemove
    • 可以在这里设置dropEffect的值，事件的默认行为是将dropEffect设置为none
    • 该事件是被拖拽元素在目标元素上移动一段时间后才触发
    • 事件的默认行为是不允许被拖拽元素在其他元素上释放或放置（即无法触发 drop 事件），需要通过 event.preventDefault() 来阻止默认行为才能触发后续的 drop 事件。
  • dragleave：被拖拽元素离开目标元素时触发
  • drop：被拖拽元素放置在目标元素上时触发（释放鼠标）
    • 对于外来的被拖拽元素（超链接、文件、图片源）， drop 事件的默认行为是浏览器将当前页面重定向到被拖拽元素所指向的资源上
    • 对文档内部的被拖拽元素，IE10+和Chrome下的默认行为是不作为，而FF得默认行为是新打开一个文档用于访问被拖拽元素所指向的资源

4、事件执行顺序：

  • drop不触发的时候：dragstart  >  drag >  dragenter >  dragover >  dragleave > dragend
  • drop触发的时候（dragover阻止了默认事件）：dragstart  >  drag >  dragenter >  dragover >  drop > dragend

5、dataTransfer对象：

  • [object DragEvent]对象：继承自[object MouseEvent]对象，其实就多了一个dataTransfer属性。
  • [object DataTransfer]对象详解：传递数据，数据类型为字符串和文件类型。
  • effectAllowed和dropEffect属性。（http://www.cnblogs.com/fsjohnhuang/p/3961066.html#t8）

6、其他属性：

  • items:数据类型为DataTransferItemList，存储DataTransfer对象中所有的数据项。
  • files:数据类型为FileList（IE5~9没有该属性）。
  • types:数据类型为DOMStringList，存储DataTransfer对象中所有数据项的数据类型。

7、方法：

  • addElement():添加一起跟随鼠标移动的元素。仅在 dragstart 事件中调用。
  • setDragImage(image,x,y):设置拖动时跟随鼠标移动的图片，用来替代默认的元素，若image不是图片元素则会元素临时转换为图片；x用于设置图标与鼠标在水平方向上的距离，y设置图标与鼠标在垂直方向上的距离。仅在 dragstart 事件中调用。IE10+不支持该方法；

示例：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title>模拟回收站</title>

         <style type="text/css">

             li{

                 list-style: none;width:100px; height:25px; line-height: 25px; background:#ccc; margin:5px; text-align: center;

             }

             #recycle{

                 width:200px; height:100px; background:red; position: absolute; top:200px;

             }

         </style>

     </head>

     <body>

         <ul id="list">

             <li draggable="true">图标1</li>

             <li draggable="true">图标2</li>

             <li draggable="true">图标3</li>

         </ul>

         <div id="recycle"></div>

     </body>

 </html>

 <script>

     window.onload = function(){

         var oList = document.getElementById("list");

         var aLi = oList.getElementsByTagName("li");

         var oRecycle = document.getElementById("recycle");

         var flag = false; //标示是否把图标放入到回收站

         for(var i = 0 ; i<aLi.length;i++){

             aLi[i].index = i;

             aLi[i].ondragstart = function(ev){

                 ev = ev || window.event;

                 ev.dataTransfer.setData("index",this.index);

                 ev.dataTransfer.setDragImage(getImg(),0,0);

             }

             aLi[i].ondragend = function(ev){

                 flag && oList.removeChild(this);

             }

         }

         oRecycle.ondragover = function(ev){

             ev.preventDefault();

         }

         oRecycle.ondrop = function(ev){

             var index =  ev.dataTransfer.getData("index");

             this.appendChild(getLiByIndex(index));

             flag = true;

         }

         function getImg(){

             var oImg = document.createElement("img");

             oImg.src = "img/111.png";

             return oImg;

         }

         function getLiByIndex(index){

             for(var i = 0 ;i < aLi.length;i++){

                 if(aLi[i].index == index) return aLi[i];

             }

         }

     }

 </script>

模拟回收站

 尊重原创：http://www.cnblogs.com/fsjohnhuang/p/3961066.html

html5 拖放事件的更多相关文章

  1. HTML5拖放事件（Drag-and-Drop,DnD）

    拖放 拖放是一种常见的特性,即抓取对象以后拖到另一个位置.在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 拖放是在“拖放源(drag source)”和“拖放目标(drop target ...

  2. HTML5拖放事件-上传图片预览功能

    主要用到的知识点有dataTransfer对象和FileReader(读取文件信息) 1.创建简单的HTML标签: <body> <div id="box"> ...

  3. HTML5拖放（drag and drop）与plupload的懒人上传

    HTML5拖放能够将本地的文件拖放到页面上,plupload又是很好的文件上传插件,而今天就将两者结合,做了个文件拖拽上传的功能. 简述HTML5拖放 拖放是HTML5标准的一部分,任何元素都能够拖放 ...

  4. HTML5 拖放

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

  5. HTML5 拖放（Drag 和 Drop）

    拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. <!DOCTYPE HTML> <html> <hea ...

  6. HTML5拖放API

    拖放事件事件提供了拖放可以控制几乎所有方面的拖放操作.棘手的部分是确定每个事件触发:在拖项目火:别人火下降的目标.拖动项时,以下事件(按照这个顺序): 拖曳开始拖dragend此刻你把鼠标按钮和开始移 ...

  7. HTML5 拖放（Drag 和 Drop）功能开发——基础实战

    随着HTML5的普及度越来越高,现在写代码也遇到一些了,经过同事的点播开展了一次Dojo活动用以技术交流,我也乘此机会将HTML5的拖放功能整理了一下. 简介 拖拽(Drag/Drop)是个非常普遍的 ...

  8. 【Demo】HTML5拖放--简单demo

    用HTML5拖放功能编写一个简单的拖放Demo 单次拖放demo 效果: ------拖放前------- ------拖放后-------  实现代码: <!DOCTYPE html> ...

  9. HTML5: HTML5 拖放

    ylbtech-HTML5: HTML5 拖放 1.返回顶部 1. HTML5 拖放(Drag 和 Drop) 拖放(Drag 和 drop)是 HTML5 标准的组成部分.   将 RUNOOB.C ...

随机推荐

  1. JVM 内存设置大小(Xms Xmx PermSize MaxPermSize 区别)

    Eclipse崩溃,错误提示:MyEclipse has detected that less than 5% of the 64MB of Perm Gen (Non-heap memory) sp ...

  2. JpGraph 画图

    1:借鉴地址 PHP jpgraph安装及基本用法 http://www.php.cn/php-weizijiaocheng-400977.html JpGraph使用详解之中文乱码解决方法 http ...

  3. Python 递归、匿名函数、map和filter day4

    一.递归---函数自己调用自己 1.一个错误递归的例子: count=0 def hello(): global count count+=1 print("count %s"%c ...

  4. Linux下的find命令

    Linux下find命令在目录结构中搜索文件,并执行指定的操作.Linux下find命令提供了相当多的查找条件,功能很强大.即使系统中含有网络文件系统,find命令在该文件系统中同样有效.在运行一个非 ...

  5. BZOJ 4430 Guessing Camels赌骆驼

    [题意概述] 给出三个n的排列,求有多少个数对在三个排列中顺序相同 [题解] 考虑用补集转化的方法,答案为总对数-不满足的对数 一对数不满足条件,当且仅当这对数在两个排列中顺序相同,在另一个排列中的顺 ...

  6. ganglia问题小结

    1.gmetad和rrdtool的关系 gmetad负责将轮询gmond拉取到的数据存入rrdtool的文件中,rrdtool 2.gemtad.conf ①命令:/usr/sbin/gmetad - ...

  7. Android音乐、视频类APP常用控件：DraggablePanel（1）

     Android音乐.视频类APP常用控件:DraggablePanel(1) Android的音乐视频类APP开发中,常涉及到用户拖曳视频.音乐播放器产生一定交互响应的设计需求,最典型的以You ...

  8. hdu 3549 最大流

    #include<stdio.h> #include<string.h> #include<queue> #include<iostream> usin ...

  9. 对SHH的公钥和私钥的简单理解

    SSH是在应用层和传输层基础上的安全协议 SSH提供了两种级别的安全验证: 第一基于密码的安全验证:账号.密码,但可能有别的服务器冒充真正的服务器,无法避免被“中间人”攻击(man-in-the-mi ...

  10. 使用外部LDAP用户认证后，DJANGO用户如何作登陆的操作？

    公司的要求,使用公司的UM帐号验证密码,然后,在DJANGO里登陆. 因为没有authenticate函数,只有login函数,所以不能简单的使用用户来login,而需要加一个backend参数... ...