<!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. 【MySQL】mysql 1449 ： The user specified as a definer ('root'@'%') does not exist

    权限问题,授权 给 root  所有sql 权限 1.mysql> grant all privileges on *.* to root@"%" identified by ...

  2. mysql-netstat

    在Linux服务器中想要查看连接到服务器的所有IP地址只需要输入命令netstat -an就可以看到全部的资料. 该命令的常见参数供您参考: -a (all)显示所有选项,默认不显示LISTEN相关: ...

  3. IRandomAccessStream, IBuffer, Stream, byte[] 之间相互转换

    /* * 用于实现 IRandomAccessStream, IBuffer, Stream, byte[] 之间相互转换的帮助类 */ using System;using System.IO;us ...

  4. 使用App.config管理数据库连接

    程序的数据库连接字符串可以保持在程序的配置文件App.config中,便于管理. 将配置文件添加至解决方案: 添加连接信息: <?xml version="1.0"?> ...

  5. 记一周cdqz训练

    #include <cstdio> using namespace std; int main(){ puts("转载请注明出处:http://www.cnblogs.com/w ...

  6. ios相同版本升级

    公司新发布ios,因为各种错误以及审核不通过造成app未能上传,而app在提交的时候不能上传相同的版本号,造成app还没有正式的上传上传已经将版本号升级到1.0.6 解决方法: 在Xcode上,查看项 ...

  7. HTML之JS学习

    提示篇 function fun(){ var is = confirm('选择对话框');/*确定取消对话框*/ if(is == true){ document.write('真');/*网页输出 ...

  8. web前端基础知识-（六）web框架

    一.web框架本质 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. #!/usr/bin/env python #coding:ut ...

  9. CSS3的filter用法

    最近到处看到有人在说CSS3的filter一直没有时间自己去测试这效果.今天终于抽出时间学习这个CSS3的Filter.不整不知道呀,一整才让我感到吃惊,太强大了.大家先来看个效果吧: 我想光看上面的 ...

  10. vim vi Ubuntu

    在vi编辑模式下按退格键不能删除内容,按方向键不能上下左右移动?如果是则:1. 在vi里非编辑模式下按冒号进入到末行命令模式,然后输入set nocompatible,回车,然后在进入vi编辑模式,看 ...