<!DOCTYPE html>
 <html>
 <head lang="en">
     <meta charset="UTF-8">
     <title></title>
     <style>
         li{
             list-style: none;
             width: 100px;
             height: 50px;
             margin: 10px;
             background: red;
         }
         #div{
             width: 200px;
             height: 100px;
             background: blue;
             margin-top: 200px;
         }
     </style>
     <script>
         onload= function () {
             /* 解决ff下的bug：必须设置dataTransfer对象的setData方法才能拖拽出图片以外的标签；
              1.dataTransfer对象：针对拖放新有的对象，是ev下的对象；
              ①setData():设置数据key和value(必须是字符串)；
              ②getData():获取数据，根据key值，获取对应的value；
              */
             var aLi=document.getElementsByTagName('li');
             var oDiv=document.getElementById('div');
             for(var i =0;i<aLi.length;i++){
                 aLi[i].ondragstart= function (ev) {
                     ev=ev||event;
                     ev.dataTransfer.setData('name','Garven');
                     this.style.background='green';
                 }
                 aLi[i].ondrag= function () {

                 }
                 aLi[i].ondragend= function () {
                     this.style.background='red';
                 }
             }
             oDiv.ondragenter= function () {
                 this.style.background='red';
             }
             oDiv.ondragover= function (ev) {
                 ev=ev||event;
                 ev.preventDefault();
             }
             oDiv.ondragleave= function () {
                 this.style.background='blue';
             }
             oDiv.drop= function (ev) {
                 alert(ev.dataTransfar.getData('name'));
                 alert('helo!');
             }
         }
     </script>
 </head>
 <body>
     <ul>
         <li>111</li>
         <li>222</li>
         <li>333</li>
     </ul>
     <div id="div"></div>
 </body>
 </html>

h5拖放-ff的bug的更多相关文章

  1. h5拖放-基础知识

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

  2. H5 拖放事件详解

    拖放事件 H5的拖放事件提供了多个接口: 1.drag:当元素或者选中的文本被拖动时触发(每几百毫秒触发一次),应用在被拖拽元素上 2.dragend:当拖动操作结束时触发(通过释放鼠标按钮或者点击转 ...

  3. 我拖拖拖--H5拖放API基础篇

    不要搞错,本文不是讲如何拖地的.看过<javascript精粹>朋友应该知道,他实现拖放的过程比较复杂,现在时代不同了,我们用H5的新的拖放API就能非常方便的实现拖放效果了.最近在园子见 ...

  4. h5拖放-拖拽购物车

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

  5. h5拖放-上传图片预览功能

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

  6. H5 拖放

    HTML 5 拖放 HTML5 音频 HTML5 画布 拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中, ...

  7. H5 播放视频常见bug及解决方案

    本文摘自:本文来自“小时光茶社(Tech Teahouse)”公众号 原文:https://mp.weixin.qq.com/s/MM5ZwCiWLAeHalsNYMImnw 1. 自动播放问题 通过 ...

  8. 小程序-web-view嵌入H5页面遇到的bug

    遇到的问题1:ios页面中,内容过多时有下滑真是功能,但是下滑的时候回看到底部的微信自带的灰色背景及H5的域名(ios的webview中上/下拉露出黑灰色背景问题) 解决办法:给body添加样式--- ...

  9. 记一次H5页面卡死的BUG

    之前有次开发小程序内嵌页面,类似于网易星球那种,很多钻石可以手动点击收取. 该页面css动效非常多,几乎页面上除了纯色背景之外全部有动效. 也正因为如此,才做成了小程序内嵌的形式(太大了). 当多次快 ...

随机推荐

  1. expunge

    expunge 擦掉: 除去: 删去: 消除 1. The experience was something he had tried to expunge from his memory. 他曾努力 ...

  2. [Andrew]Ext.net前台弹框

    //有询问的提示框 Ext.Msg.show({            title: title,            msg: msg,            buttons: Ext.Msg.Y ...

  3. 单元测试工具之Xunit

    在.NET开发中的单元测试工具之——xUnit.Net  原始出处 http://zhoufoxcn.blog.51cto.com/792419/1172320 在上一篇<在.NET开发中的单元 ...

  4. 十款PHP开发框架对比

    PHP开发框架近来在PHP社区中成为讨论的热点,几乎每天都在推出新的框架.面对市面上超过四十种的开发框架,你很难判断究竟哪一款最适合你,尤其是在这些框架所提供的功能不尽相同的时候.    本文将引导你 ...

  5. 基于野火M3开发板（STM32F103VET6）的迷宫小球（重力感应控制）游戏开发

    2013-03-03 这是研一上学期<实时嵌入式系统实验>课程的大作业,是利用野火板的资源,加上一个AHRS(Attitude and Heading Reference System,姿 ...

  6. Java Script after Douglas Crockford's Training (JSON father)

    有幸能参加大牛的培训,学到了很多东西,下面总结一下: 1.总的思想是每一门语言都有好有坏,我们要通过好的代码规范和其他一些方式去避免使用糟糠的那一部分.JS有很多缺点,但是也有很多优点,我们就用他的优 ...

  7. [解决]ASP.NET MVC 4/5 源码调试(source code debug)

    ========================ASP.NET MVC 4============================ ASP.NET MVC 4 source code download ...

  8. java继承和多态

    父类和子类 如果类C1扩展自另一个类C2,那么C1称为子类或派生类,C2称为父类或基类.派生类可以从它的基类中继承可访问的数据域和方法,还可添加新数据域和新方法 例如:实现一个几何图形基类; clas ...

  9. jsp?echo

  10. hdoj 3790 最短路径问题

    最短路径问题 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Subm ...