<!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. mac usb转串口 连接树莓PI

    USB 转串口是淘宝买的 http://item.taobao.com/item.htm?spm=a1z09.2.9.50.YOJBwG&id=38963495468&_u=4m1dr ...

  2. Java内存结构、类的初始化、及对象构造过程

    概述 网上关于该题目的文章已经很多,我觉得把它们几个关联起来讲可能更好理解一下.与其它语言一样,它在执行我们写的程序前要先分配内存空间,以便于存放代码.数据:程序的执行过程其实依然是代码的执行及数据的 ...

  3. html2canvas 网页截图 下载 上传

    利用html2canvas插件 对网页截图 并下载和上传图片. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//E ...

  4. python join和split和strip用法

    python join 和 split方法的使用,join用来连接字符串,split恰好相反,拆分字符串的. strip()为去除开头结尾指定的字符,空着时是去除空白字符\t,\n,\r意思 1.jo ...

  5. tRNAscan-SE

    tRNAscan-SE是一款可以在基因组上扫描tRNA的序列,也就是说你给定一组基因序列(fasta数据格式),可以用这个软件去预测这个序列是不是tRNA.具体的实现原理,我不搞生物,所以也就不太明白 ...

  6. HW6.6

    public class Solution { public static void main(String[] args) { int[] prime = new int[50]; prime[0] ...

  7. POJ2389: 大数字乘法算法

    2014-12-26 大数字乘法算法一般是采用模拟"小学生乘法演算过程”方法. 主要算法思想: 1. 乘数a第i)位与乘数b第j)位数字相乘,并将该乘积结果放到乘积结果数组product的第 ...

  8. hdu5792--World is Exploding

    题意:给一个数列,求四个各不相同的数,一个逆序对,一个正序对,求多少组这样的四个数. 题解:辣鸡如我,还是上官方题解了. rg(i)就是i右边比i大的数的个数,rs(i)就是i右边比i小的数的个数. ...

  9. EntityFramework更新多条数据【8万】

    此文主要用做记录用: 原因:数据库迁移,需要转换大量用户资料,两数据某字段加密方式不一致需要批量转换 注:转换程序用了EntityFramework 过程: 1.读取所有需要转换数据至List 2.采 ...

  10. 获取最外层View

    获取最外层View activity.getWindow().getDecorView()