拖拽元素事件<br/>
ondragstart拖拽前触发<br/>
ondrag拖拽结束之前连续触发<br/>
ondragend 拖拽结束前触发<br/>
目标元素事件<br/>
ondragenter进入目标元素触发 相当于mouseover<br/>
ondragover 进入目标，离开目标之间连续触发<br/>
ondragleave 离开目标元素触发，相当于mouseout<br/>
ondrop  在目标元素上释放鼠标触发<br/>

<!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 oli=document.getElementsByTagName('li');

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

           var k=0;

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

         {

               oli[i].ondragstart=function(){

                   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(){

             alert('要想运行此函数必须在ondragover里阻止默认事件');

         }

   }

</script>

</head>

<body>

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

拖拽元素事件<br/>

ondragstart拖拽前触发<br/>

ondrag拖拽结束之前连续触发<br/>

ondragend 拖拽结束前触发<br/>

目标元素事件<br/>

ondragenter进入目标元素触发 相当于mouseover<br/>

ondragover 进入目标，离开目标之间连续触发<br/>

ondragleave 离开目标元素触发，相当于mouseout<br/>

ondrop  在目标元素上释放鼠标触发<br/>

</div>

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

<ul>

<li></li>

<li></li>

<li></li>

</ul>

</body>

</html>

html5 拖拽函数1--不兼容火狐的更多相关文章

  1. Html5拖拽复制

    拖拽是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖拽是标准的一部分,任何元素都能够拖拽. Html5拖拽非常常见的一个功能,但是大部分拖拽的案例都是一个剪切的过程, 项目中需 ...

  2. html5拖拽

    html5拖拽一 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...

  3. HTML5 拖拽复制功能的实现方法

    Internet Explorer 9FirefoxOpera 12ChromeSafari 5 v1.0代码部分 <!DOCTYPE html><html><head& ...

  4. 每天一个JavaScript实例-html5拖拽

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  5. HTML5拖拽功能中 dataTransfer对象详解

    有了HTML5,老板再也不用担心我们的上传了,再加上有拖拽上传是不是很酷.百度一下,有关HTML5拖拽上传的文章和实例不少,都缺不了一个至关重要的东东DataTransfer.但是详细介绍的不多,尤其 ...

  6. 基于html5拖拽api实现列表的拖拽排序

    基于html5拖拽api实现列表的拖拽排序 html代码: <ul ondrop="drop_handler(event);" ondragover="dragov ...

  7. 火狐html5拖拽 弹出新页面解决办法

    今天做项目时,需要实现一个拖拽排序的功能,遂想到了html5的拖拽,便开始查资料,写代码.功夫不复有心人,通过网上资料作参考,排序功能成功实现.谷歌浏览器测试,拖拽平滑,无问题.火狐浏览器测试时,却无 ...

  8. HTML5 拖拽实现

    简介: 最早在网页中引入JavaScript拖放功能是IE4.当时,网页中只有两种对象可以拖放:图像和某些文本.拖放图像时,把鼠标放到图像上,按住鼠标不放就可以拖放它.拖放文本时,要先选中文本,然后可 ...

  9. html5 拖拽(drag)和f放置(drop)

    知识要点 HTML5 (drag&drop) API  (Event) 拖放数据(对象):DataTransfer 拖放内容:setData getData 拖放效果(动作):dropEffe ...

随机推荐

  1. 从2G到5G, 基站天线过去与未来

    在蜂窝移动通信系统中,天线是电路信号与空间辐射电磁波的转换器,是移动通信系统的末梢关键组成部分. 从2G到4G,移动基站天线经历了全向天线.定向单极化天线.定向双极化天线.电调单极化天线.电调双极化天 ...

  2. Firefox默认英文修改中文

    对于firefox,中文还是看着顺眼,为了自己的顺心.动起手来,自力更生,丰衣足食! 01.确定Linux的firefox版本 firefox -v 02.下载对应版本的中文语言包 http://ft ...

  3. Sqlite3常用的插入方法及性能测试

    最近做到的项目涉及一个大数据量缓存重传,其中要用到的sqlite技术,把自己的学习心得整理了一下. SQLite,是一款轻型的数据库,是遵守ACID的关系型数据库管理系统,它包含在一个相对小的C库中. ...

  4. java的反射

    JAVA反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意方法和属性:这种动态获取信息以及动态调用对象方法的功能称为java语言的反射机制. ...

  5. com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: Unknown column 'dd' in 'where clause'

    今天在使用mysql数据库查找数据的时候报错,错误信息如下: com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: Unknown co ...

  6. <form:select>的使用

    最近在学习springMVC,用到了<form:select>标签,使用发过程中遇到了些问题,现在记录下,以防忘记. 我jsp页面是这样的: <%@ page language=&q ...

  7. Activity详解生命周期(Android)

    Activity是Android组件中最基本也是最为常见用的四大组件(Activity,Service服务,Content Provider内容提供者,BroadcastReceiver广播接收器)之 ...

  8. Android必学——AsyncTask

    第一章  AsyncTask的基本构成 为是么要异步任务 1)Android单线程模型 2)耗时操作放在非主线程中执行 AsyncTask为何而生 1)子线程中跟新UI 2)封装.简化异步操作 pub ...

  9. nginx代理TCP端口

    1.升级nginx 版本至1.9.0以上 升级流程参考 nginx平滑升级 2.配置编译的时候需要加上 ./configure --prefix=/usr/local/nginx --user=www ...

  10. Git，non-fast-forward

    当把coding好的code,push到Git时会出现这个错误:master[rejected  non-fast-forward] 问题(Non-fast-forward)的出现原因在于:git仓库 ...