拖拽元素事件<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. 如何在一台新电脑上配置JAVA开发环境

    对于JAVA新手来说,刚开始要学JAVA,而自己的电脑上毫无与JAVA开发有关的环境,应该如何进行配置呢? (安卓新手也需要JAVA开发环境) 第一步,下载.安装java JRE JRE (Java ...

  2. 一文弄懂神经网络中的反向传播法——BackPropagation

    最近在看深度学习的东西,一开始看的吴恩达的UFLDL教程,有中文版就直接看了,后来发现有些地方总是不是很明确,又去看英文版,然后又找了些资料看,才发现,中文版的译者在翻译的时候会对省略的公式推导过程进 ...

  3. Hihocoder 太阁最新面经算法竞赛18

    Hihocoder 太阁最新面经算法竞赛18 source: https://hihocoder.com/contest/hihointerview27/problems 题目1 : Big Plus ...

  4. 求n!最后一位非零数

    引子:求n!末尾0的个数 n!末尾的0来源只有2,5两个质数相乘.所以只需要考察n!中包含多少个2和多少个5.然后取其较小值即为所求.即ans=min(cnt(2),cnt(5)).而转念一想,cnt ...

  5. 关于js中this关键字的补充

    前面: 前面虽然综合了网络上不少大牛的心得,但感觉还是意犹未尽,为了彻底搞清楚js中this的相关知识,决定再写一篇.个人觉得,在技术上,除非钻到细枝末节,否则很难达至非常高的水平. 补充1: 无法重 ...

  6. C#面向对象设计模式纵横谈——6.Prototype 原型模式(创建型模式)

    动机(Motivation) 在软件系统中,经常面临着“某些结构复杂的对象”的创建工作.由于需求的变化,这些对象经常面临着剧烈的变化,但他们却拥有比较稳定一致的接口. 如何应对这种变化?如何向“客户程 ...

  7. 【BZOJ-1146】网络管理Network DFS序 + 带修主席树

    1146: [CTSC2008]网络管理Network Time Limit: 50 Sec  Memory Limit: 162 MBSubmit: 3495  Solved: 1032[Submi ...

  8. BZOJ1257 [CQOI2007]余数之和sum

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000 作者博客:http://www.cnblogs.com/ljh2000-jump/ ...

  9. TYVJ1035 棋盘覆盖

    时间: 1000ms / 空间: 131072KiB / Java类名: Main 描述 给出一张n*n(n<=100)的国际象棋棋盘,其中被删除了一些点,问可以使用多少1*2的多米诺骨牌进行掩 ...

  10. [C#] NPOI Excel解析

    通过NPOI解析Excel,将数据保存到DataTable中. #region excel解析 public DataTable ImportExcelFile(string filePath) { ...