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 ...
随机推荐
- navicat注册码
1. navicat for mysql 9 注册码 ::: NAVL-EHNC-7N7P-W6GM 2. navicat for mysql 9.17中文版 注册码 :: NAVM-5ZC ...
- 使用Hibernate的 isNotEmpty( ) 方法 报错: No result defined .... and result dataAccessFailure
数据访问失败 出错代码: cardy.add(Restrictions.isNotEmpty("grade.cardtype.cardtype")); try...catch之后发 ...
- AngularJS指令
1. AngularJS指令的特点: AngularJS通过被称为指令的新属性来扩展HTML,指令的前缀为ng-. AngularJS通过内置的指令来为应用添加功能. AngularJS允许你自定义指 ...
- 【转】iOS，搜索标签布局
前一阵时间,看过这样一个demo,代码不多,但是简洁易懂. 转自: // 代码地址: https://github.com/iphone5solo/PYSearch // 代码地址: http:/ ...
- java中jqGrid时间戳格式转换
找到如下代码 if( !isNaN( date - 0 ) && String(format).toLowerCase() == "u") { //Unix tim ...
- 多线程之任务: Task 基础, 多任务并行执行, 并行运算（Parallel）
Task - 基于线程池的任务(在 System.Threading.Tasks 命名空间下) 多 Task 的并行执行 Parallel - 并行计算(在 System.Threading.Task ...
- JNI开发的常见错误
1. 写错了load的library java.lang.UnsatisfiedLinkError: Couldn't load hell0: findLibrary returned null 2. ...
- Mysql触发器
触发器(trigger)作用:监视某种情况,并触发某种操作. 触发器创建语法四要素: 1.监视地点(table) 2.监视事件(insert/update/delete) 3.触发时间(after/b ...
- iOS PhotoKit框架如何获取视频文件大小
// 获取相册中的资源[group enumerateAssetsWithOptions:NSEnumerationReverse usingBlock:^(ALAsset *result, NSUI ...
- javascript随机打乱数组
var arr=[]; ;i<;i++){ arr[i]=i; } arr.sort(function(){ return 0.5 - Math.random() }) var str=arr. ...