<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

<style>

.div1{width: 500px; height: 600px; background: yellow; font-size: 22px; position: absolute; bottom: 0;}

.div3{width: 500px; height: 600px; background: yellow; font-size: 22px; position: absolute; left: 600px;}

li{display: block; width: 50px; height: 50px; background: red; margin-top: 10px;}

</style>

<script>

   window.onload=function (){

              var oul=document.getElementsByTagName('ul')[0];

           var oli=document.getElementsByTagName('li');

           var odiv=document.getElementById('div4');

           var k=0;

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

         {        oli[i].index=i;

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

                 ev=ev||window.event;

                 ev.dataTransfer.setData('name',this.index);
                 ev.dataTransfer.setDragImage(odiv,0,0);

                   this.style.background='yellow';

               }

              oli[i].ondrag=function(){

                  document.title=k++;

              }

              oli[i].ondragend=function(){

                      this.style.background='green';

              }

         }

         odiv.ondragenter=function(){

             this.style.background='red';

         }

           odiv.ondragover=function(ev){

             document.title=k++;

             ev.preventDefault();

         }

          odiv.ondragleave=function(){

             this.style.background='blue';

         }

          odiv.ondrop=function(ev){

             alert(ev.dataTransfer.getData('name',this.index));

             oul.removeChild(oli[ev.dataTransfer.getData('name',this.index)]);

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

             oli[i].index=i;

         }

      }

   }

</script>

</head>

<body>

<div id="div2" class="div1">

ev.dataTransfer.setData('name',this.index);

保存当前用户的索引

获取当前用户的索引

oli[ev.dataTransfer.getData('name',this.index)
拖动时候获取的图片
ev.dataTransfer.setDragImage(odiv,0,0); 1参可以是图片 2参坐标 3坐标

</div>

<div id="div4" class="div3"></div>

<ul>

<li></li>

<li></li>

<li></li>

</ul>

</body>

</html>

ev.dataTransfer.setData('name',this.index); 保存当前用户的索引

ev.dataTransfer.getData('name',this.index）获取当前用户的索引

html5 兼容火狐 ev的事件的更多相关文章

  1. 兼容IE与firefox火狐的回车事件(js与jquery)

    javascript 兼容IE与firefox火狐的回车事件 复制代码代码如下: <script language="javascript"> function key ...

  2. 函数节流scroll，兼容火狐滚轮事件

    //函数节流 var wheelTimeout; var wheelFun = function (func) { if (wheelTimeout) { return; } func(); whee ...

  3. js下载base64格式的图片(兼容火狐)

    //下载图片 download() { let imgData = 'data:image/png;base64,iVBORw0KGgoAAAANSUh........'; this.download ...

  4. window.open('') 火狐，IE事件冒泡处理，点击事件冒泡处理

    window.open('') 火狐,IE事件冒泡处理,点击事件冒泡处理 写PC下拉菜单的时候,hover样式显示下拉菜单,可能会这样写 <li class="xb_li1" ...

  5. css把超出的部分显示为省略号的方法兼容火狐

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  6. 实现关闭窗口IE不提示兼容火狐

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  7. 向上下左右不间断无缝滚动图片的效果(兼容火狐和IE)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. jquery uploadify上传插件兼容火狐问题

    jquery uploadify长传插件兼容火狐问题.因为现在火狐以不在默认安装flash插件.所以uploadify的flash版就需要安装flash插件.还可以成功. 可以到哪里下载安装:http ...

  9. js兼容火狐显示上传图片预览效果

    js兼容火狐显示上传图片预览效果[谷歌也适用] <!doctype html> <html> <head> <meta content="text/ ...

随机推荐

  1. CF719E（线段树+矩阵快速幂）

    题意:给你一个数列a,a[i]表示斐波那契数列的下标为a[i],求区间对应斐波那契数列数字的和,还要求能够维护对区间内所有下标加d的操作 分析:线段树 线段树的每个节点表示(f[i],f[i-1])这 ...

  2. 常用Linux命令

    1.mkdir 建立目录 $ mkdir testdir 2.ls   列出目录下的内容的详细信息  ls -al testdir 3.cd  更换当前工作目录   cd testdir 4.pwd  ...

  3. js实现可拖动Div

    随着时代的变化,越来越感觉到js的重要性,js不仅可以做web页面(如Ext框架),还可以做一些web的特效,这些特效不仅兼容PC,而且兼容手机端,毕竟是基于浏览器的,和平台没关系.现在微软的wind ...

  4. FtpUtil

    /* * 文件名:FtpUtil.java * 版权:Copyright 2000-2007 Huawei Tech. Co. Ltd. All Rights Reserved. * 描述: TopE ...

  5. 请写一个php函数，可以接受任意数量的参数

    请写一个php函数,可以接受任意数量的参数 这是一道面试题.怎么写这个函数呢? function fun(......) { } ----------------------------------- ...

  6. 【USACO 3.2】Stringsobits （dp）

    题意:求第k大的最多有l个1的n位二进制. 题解:dp[i][j]表示长度为i最多有j个1的二进制有多少种,则有: 状态转移:dp[i][j]=dp[i-1][j]+dp[i-1][j-1],即第i位 ...

  7. vue-validator（vue验证器）

    官方文档:http://vuejs.github.io/vue-validator/zh-cn/index.html github项目地址:https://github.com/vuejs/vue-v ...

  8. 关于闭包（closure）的一些概念

    和其他大多数现代编程语言一样,JS也采用词法作用域,也就是说,函数的执行依赖于变量作用域,这个作用域是在函数定义时决定的,而不是函数调用时决定的.为了实现这种词法作用域,JS函数对象的内部状态不仅包含 ...

  9. Android源码——Activity进程内启动

    进程内启动Activity MainActivity组件向ActivityManagerService发送一个启动SubActivityInProcess组件的进程间通信请求: ActivityMan ...

  10. django文件上传和序列化

    django实现文件上传 使用form表单上传文件 html页面 <html lang="en"> <head> <meta charset=&quo ...