<!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. 基于C/S架构的3D对战网络游戏C++框架 _04客户端详细设计与OpenGL、Qt基础

    本系列博客主要是以对战游戏为背景介绍3D对战网络游戏常用的开发技术以及C++高级编程技巧,有了这些知识,就可以开发出中小型游戏项目或3D工业仿真项目. 笔者将分为以下三个部分向大家介绍(每日更新): ...

  2. 实体类和DataTable的转换

    引子 最近在项目中在数据库查询的时间,总是要用到数据表到实体类对象列表的转化,自己封装了一个转换的方法,用起来还比较方便,记下来,以后可以重复使用,原理就主要是利用反射,当然有更好的ORM框架可以实现 ...

  3. DDR相关的低功耗技术之PASR、TCSR、DPD

    随着智能机的发展,DDR内存容量越来越大,bank数量越来越多,功耗也越来越大.在不需要的时候关闭部分bank,或者降低自刷新频率,或者进入深度低功耗模式.有三种DDR技术用来降低功耗: PASR(P ...

  4. Tomcat虚拟目录配置方法及原理

    tomcat 安装好之后,只需要把你的程序包放到$Tomcat_Home$/webapps下就可以直接使用了.这样会使webapps越来越大就需要设置虚拟目录: 1.单个应用设置: 在<Host ...

  5. jq.validate 自定义验证两个日期

    jq.validate 自定义验证两个日期 首先定义有一个表单,date1和date2是属于表单的元素,若date1大于date2,返回false:若date1<date2,返回true.使用j ...

  6. shell及脚本2——shell 环境及命令

    一.快捷键.通配符.特殊符号 1. 快捷键 CTRL+C:终止目前的命令 CTRL+D:输入结束,EOF CTRL+M:ENTER CTRL+S:暂停屏幕输出 CTRL+Q:恢复屏幕输出 CTRL+U ...

  7. ABP文档 ：Overall - Module System

    模块介绍 ABP提供了构建模块并将这些模块组合起来创建应用的基础设施.一个模块可以依赖另一个模块.一般来说,一个程序集可以认为是一个模块.如果应用中有多个程序集,建议为每个程序集创建一个模块定义.模块 ...

  8. YYKit学习系列 ---- 开篇

    准备花半年时间系统学习YYKit,  学习过程会放入"YYKit学习系列"这个分类, 喜欢YYKit的可以随时留意我的文章, 一起学习!!!

  9. java语言 打印素数实例

    //根据定义判断素数---循环n-1次,当n很大时循环n次 public static void main(String[] args) {        // TODO Auto-generated ...

  10. 【JavaWeb】Spring+SpringMVC+MyBatis+SpringSecurity+EhCache+JCaptcha 完整Web基础框架（三）

    Spring+SpringMVC MVC呢,现在似乎越来越流行使用SpringMVC框架,我自己用的感觉,是非常好,确实很舒服,配置一开始是麻烦了一点点,但是后续的开发真的是很清爽! SpringMV ...