<!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. ViewPager onPageChangeListener总结

    今天在做项目的时候,由于要处理viewPager页面滑动的事件,所以对其进行了一个小小的研究: 首先ViewPager在处理滑动事件的时候要用到OnPageChangeListener OnPageC ...

  2. 在Oracle中更新数据时，抛出：ORA-01008： not all variables bound

    在Oracle中更新数据时,抛出了一个 :ORA-01008 not all variables bound, 我的理解是不是所有的变量/参数都有边界,不懂: 后来知道了,原来是“不是所有变量/参数都 ...

  3. Visual Studio中的一些较大的文件的作用

    1.sdf 这些是工程中的中间,用于预编译等作用,最终可执行文件是不需要的,默认情况下,删除后重新编译还会生成.如果不需要,在Visual Studio里进入如下设置: 进入"Tools & ...

  4. [转] Symbol对象

    GIS中的离散实体有三种:点.线.面,在ArcEngine中用三种符号对应表示,分别是:MarkSymbol.LineSymbol和FillSymbol.此外还有TextSymbol用于文字标注,3D ...

  5. HDU 1075-What Are You Talking About（Trie）

    题意: 给你一个字典 一个英文单词对应一个火星单词 给你一段火星文翻译成英文 字典上的没有的不翻译 分析: 没有给数据规模 字典树用链表 #include <map> #include & ...

  6. HDU 3642 Get The Treasury 线段树+分层扫描线

    http://www.acmerblog.com/hdu-3642-get-the-treasury-6603.html 学习:三维就是把竖坐标离散化分层,每一层进行线段树二维面积并就好了

  7. selenium IDE & Remote Control & Webdriver

    一直忘记写selenium的开始学习的过程,今天趁五一,天气有雨,写下这文章 1.进入selnium官网,了解selenium1,2,grid的区别.下载c#相关的包(使用c#的人非常少) 2.使用I ...

  8. pomelo环境搭建

    在ubuntu上搭建pomelo环境 一 安装node.js 不要直接安装nodejs, 因为ubuntu上默认的nodejs版本是0.6的太老千万不要下tar包自己安装, 问题很多正确方法如下:   ...

  9. Morris Traversal

    昨天临近要睡觉的时候做了一个leetcode题目,"Recover BST",算法很容易就想到了,直接找出两个异常点就好了,但是我写的算法是用栈实现的非递归遍历,空间复杂度是O(N ...

  10. 【FOI】异或问题

    题意: 给出n个数ai 和m个操作 操作有两种 C x y:将ax的值改为y Q x:求几种方案使得 b1^b2^...^bn=x(ai>=bi) 题解: 先推荐一个不错的题解 题目差不多 我之 ...