<!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# Winform代码片段-大二下学期的垃圾代码

    1.图片缩放 using System; using System.Windows.Forms; using System.Drawing; class haha : Form { static vo ...

  2. 使用AccessibilityService执行开机自启动

    res/xml/accessibility_service_config.xml <accessibility-service xmlns:android="http://schema ...

  3. vue.js 第二课

    实现响应的数据绑定和组合的视图组件. 让数据与Dom保持同步 . 在使用jq手工操作DOM时,我们的代码常常是命令式的.重复的.易错的.Vue.js拥抱数据驱动的视图概念.简单的讲,它意味着我们在普通 ...

  4. 以.net core重构原有.net framework过程中的一些API变更记录（持续更新）

    1)Type.IsGenericType类似属性变更 以下是.net framework 4.5中Type抽象类中泛型类型的几个个属性,用于泛型类型的相关信息判断: 以下是.net core(nets ...

  5. 批量从jar包中提取pom.xml

    将非maven项目转换为maven项目,首要第一步就是提取原工程依赖jar里的pom.xml,拼成<dependency>节点 import java.io.File; import ja ...

  6. Hibernate（Control）

    案例:http://blog.csdn.net/jiuqiyuliang/article/details/39380465 对象关系映射框架,它对JDBC进行了轻量级的对象封装,可以使用对象编程思维来 ...

  7. 首次接触nodejs

    嗯,2017年第一次接触nodejs ,也费了一些时间才终于将hello world正确运行出来. 下面说一下我的详情吧: 第一步:不用说,在https://nodejs.org/en/下载一款新的稳 ...

  8. RabbitMQ学习系列（一）: 介绍

    1. 介绍 RabbitMQ是一个由erlang开发的基于AMQP(Advanced Message Queue )协议的开源实现.用于在分布式系统中存储转发消息,在易用性.扩展性.高可用性等方面都非 ...

  9. 盒子 offsetLeft、offsetTop、offsetWidth、getBoundingClientRect等属性解释

    offsetLeft 获取的是忽略 margin 当前元素距离上一级父节点(有没有设置position,有的话依据父节点,没有的话依据页面最左端这时候不管滚动条移到哪) 当前元素向左的位置 记住它会将 ...

  10. AngularJS学习第一课

    AngularJS2与AngularJS1有很大的不同. AngularJS2支持ECMAScript6,为了提升性能,支持移动化开发(安卓.ios平台),因此升级为AngularJS 2,Angul ...