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 ...
随机推荐
- .NET跨平台之旅：将示例站点升级至ASP.NET Core 1.0
北京时间6月28日凌晨,微软发布了 .NET Core 1.0,详见新闻 .NET Core 1.0 正式发布了 ,ASP.NET Core 1.0 也随之一起发布了. 紧跟这次发布,我们将跑在 Li ...
- TextView字体阴影效果
android:shadowDx="1" android:shadowDy="1" android:shadowColor="#8c8c8c" ...
- 【C#】toString("Format") 格式化
1..ToString("P");//得到小数点后2位的百分比,自动 加上%号;//9512.35% 这个比较厉害! furenjun yoolonet
- 关于FloatingActionButton
由于FloatingActionButton本质上是ImageView,跟ImageView相关的就不介绍,这里重点介绍新加的几个属性. app:fabSize:FloatingActionButto ...
- 【poj3744】 Scout YYF I
http://poj.org/problem?id=3744 (题目链接) 题意 给出n个雷,分别在 a[1]...a[n] ,走一步概率为 p ,走两步概率为 1-p ,一开始在 1 号位置,问安全 ...
- Python json.dumps 特殊数据类型的自定义序列化操作
场景描述: Python标准库中的json模块,集成了将数据序列化处理的功能:在使用json.dumps()方法序列化数据时候,如果目标数据中存在datetime数据类型,执行操作时, 会抛出异常:T ...
- 基于Dubbo框架构建分布式服务（三）
我们将上面开发的服务提供方服务,部署到2个独立的节点上(192.168.14.1和10.10.4.125),然后可以通过Dubbo管理中心查看对应服务的状况,如图所示: 上图中可以看出,该服务有两个独 ...
- Python MongoDB使用介绍
MongoDB介绍 MongoDB是一个面向文档的,开源数据库程序,它平台无关.MongoDB像其他一些NoSQL数据库(但不是全部!)使用JSON结构的文档存储数据.这是使得数据非常灵活,不需要的S ...
- CocoaPods升级,升级以后出现bug的解决方法(升级必看!)
命令行更新(安装)步骤[更新步骤] $ sudo gem update --system // 先更新gem,国内需要切换源 $ gem sources --remove https://rubyge ...
- MVC中使用[ValidateAntiForgeryToken]防止CSRF 注入攻击
CSRF(Cross-site request forgery),中文名称:跨站请求伪造,也被称为:one click attack/session riding,缩写为:CSRF/XSRF.通俗的理 ...