html5 拖拽函数1--不兼容火狐
拖拽元素事件<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--不兼容火狐的更多相关文章
- Html5拖拽复制
拖拽是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖拽是标准的一部分,任何元素都能够拖拽. Html5拖拽非常常见的一个功能,但是大部分拖拽的案例都是一个剪切的过程, 项目中需 ...
- html5拖拽
html5拖拽一 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...
- HTML5 拖拽复制功能的实现方法
Internet Explorer 9FirefoxOpera 12ChromeSafari 5 v1.0代码部分 <!DOCTYPE html><html><head& ...
- 每天一个JavaScript实例-html5拖拽
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- HTML5拖拽功能中 dataTransfer对象详解
有了HTML5,老板再也不用担心我们的上传了,再加上有拖拽上传是不是很酷.百度一下,有关HTML5拖拽上传的文章和实例不少,都缺不了一个至关重要的东东DataTransfer.但是详细介绍的不多,尤其 ...
- 基于html5拖拽api实现列表的拖拽排序
基于html5拖拽api实现列表的拖拽排序 html代码: <ul ondrop="drop_handler(event);" ondragover="dragov ...
- 火狐html5拖拽 弹出新页面解决办法
今天做项目时,需要实现一个拖拽排序的功能,遂想到了html5的拖拽,便开始查资料,写代码.功夫不复有心人,通过网上资料作参考,排序功能成功实现.谷歌浏览器测试,拖拽平滑,无问题.火狐浏览器测试时,却无 ...
- HTML5 拖拽实现
简介: 最早在网页中引入JavaScript拖放功能是IE4.当时,网页中只有两种对象可以拖放:图像和某些文本.拖放图像时,把鼠标放到图像上,按住鼠标不放就可以拖放它.拖放文本时,要先选中文本,然后可 ...
- html5 拖拽(drag)和f放置(drop)
知识要点 HTML5 (drag&drop) API (Event) 拖放数据(对象):DataTransfer 拖放内容:setData getData 拖放效果(动作):dropEffe ...
随机推荐
- android studio 不能创建或者安装模拟器
解决方法: (1).对与这类问题实在不行卸载然后安装,看看自己的网络是否把android studio下载的东西给墙了,墙了记得换网. (2).我安装andriod studio 2.2.2.0 版本 ...
- Http client 请求
public String sendPost(String url, String param) { System.out.println("------------------ 1&quo ...
- Redis-Sentinel(Redis集群监控管理)
Redis的高可用方案的实现:主从切换以及虚拟IP或客户端 从Redis 2.8开始加入对Sentinel机制从而实现了服务器端的主从切换,但目前尚未发现实现虚拟IP或客户端切换方案 Redis-Se ...
- CSS:position:fixed使用(转)
position属性规定元素的定位类型,即建立元素布局所用的定位机制.任何元素都可以定位,不过绝对定位或固定定位元素会生成一个块级框,而不论该元素本身是什么类型.相对定位元素会相对于它在正常流中的默认 ...
- Mysql两个引擎对比
Mysql两个引擎对比 MyIsam 优点: 1.支持B-Tree检索和文本全文检索 2.性能消耗方面相对较低 3.支持全表(table)锁 缺点: ...
- Angular select 绑定复杂类型 设置默认项
<select ng-model="selectedTask" ng-options="s.name for s in TaskList">< ...
- Activity详解生命周期(Android)
Activity是Android组件中最基本也是最为常见用的四大组件(Activity,Service服务,Content Provider内容提供者,BroadcastReceiver广播接收器)之 ...
- wxpython绘制折线图
environment:win10 + eclipse + pydev + python2.7.11 + wxpython3.0.2 code sample: #!/usr/bin/env pytho ...
- druid连接池获取不到连接的一种情况
数据源一开始配置: jdbc.initialSize=1jdbc.minIdle=1jdbc.maxActive=5 程序运行一段时间后,执行查询抛如下异常: exception=org.mybati ...
- 响应式布局-Rem的用法
前言: 文章较为系统地介绍了rem这个新的文字大小单位,绝对干货,绝对好文.转载时略有改动. 先来看看一些基本理念,比如: 响应式网页不仅仅是响应不同类型的设备,而且需要响应不同的用户需求.响应式 ...