js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器


Posted in Javascript onJune 06, 2013

注意使用preventDefault防止浏览器的默认事件操作发生

<script language="javascript" type="text/javascript"> 
var isDrag = false; 
function isIE(){ 
if(navigator.userAgent.indexOf("MSIE")>0){return true;} 
else{return false;} 
} 
function addListener(element,e,fn){ 
if(isIE()){element.attachEvent("on" + e,fn);} 
else{element.addEventListener(e,fn,false);} 
} 
function drag(e){ 
var e = e || window.event; 
var element = e.srcElement || e.target; 
if(e.preventDefault)e.preventDefault(); 
else e.returnvalue=false; 
isDrag = true; 
var relLeft = e.clientX - parseInt(element.style.left); 
var relTop = e.clientY - parseInt(element.style.top); 
element.onmouseup = function(){ isDrag = false; } 
document.onmousemove = function(e_move){ 
var e_move = e_move || window.event; 
if(isDrag){ 
element.style.left=e_move.clientX - relLeft + "px"; 
element.style.top=e_move.clientY - relTop + "px"; 
return false; 
} 
} 
} 
window.onload = function() 
{ 
var element = document.getElementById("elimg"); 
var element2 = document.getElementById("eldiv"); 
addListener(element,"mousedown",drag); 
addListener(element2,"mousedown",drag); 
} 
</script> 
<div id="eldiv" style="width:140px;height:100px;background:#EEE;position:absolute;left:117px;top:124px"></div> 
<img id="elimg" style="left:609px;top:113px;position:absolute" src="http://www.cnit618.com/template/images/logo.gif" />
Javascript 相关文章推荐
javascript中xml操作实现代码
Nov 21 Javascript
关于Jquery操作Cookie取值错误的解决方法
Aug 26 Javascript
JS实现自动变换的菜单效果代码
Sep 09 Javascript
JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色
Nov 26 Javascript
基于JavaScript如何制作遮罩层对话框
Jan 26 Javascript
JavaScript每天必学之事件
Sep 18 Javascript
canvas绘制环形进度条
Feb 23 Javascript
详谈js遍历集合(Array,Map,Set)
Apr 06 Javascript
jQuery实现checkbox全选功能完整实例
Jul 12 jQuery
解决vue attr取不到属性值的问题
Sep 18 Javascript
CKEditor扩展插件:自动排版功能autoformat插件实现方法详解
Feb 06 Javascript
Vue如何实现变量表达式选择器
Feb 18 Vue.js
当鼠标移动到图片上时跟随鼠标显示放大的图片效果
Jun 06 #Javascript
原生js实现半透明遮罩层效果具体代码
Jun 06 #Javascript
jquery js 获取时间差、时间格式具体代码
Jun 05 #Javascript
JavaScript设置IFrame高度自适应(兼容各主流浏览器)
Jun 05 #Javascript
JavaScript的漂亮的代码片段
Jun 05 #Javascript
Javascript中的for in循环和hasOwnProperty结合使用
Jun 05 #Javascript
理解JAVASCRIPT中hasOwnProperty()的作用
Jun 05 #Javascript
You might like
探讨PHP JSON中文乱码的解决方法详解
2013/06/06 PHP
回帖脱衣服的图片实现代码
2014/02/15 PHP
既简单又安全的PHP验证码 附调用方法
2016/06/02 PHP
一页面多XMLHttpRequest对象
2007/01/22 Javascript
js Dialog 实践分享
2012/10/22 Javascript
js模仿html5 placeholder适应于不支持的浏览器
2013/01/13 Javascript
javascript教程之不完整的继承(js原型链)
2014/01/13 Javascript
解决jquery插件冲突的问题
2014/01/23 Javascript
jQuery简单图表peity.js使用示例
2014/05/02 Javascript
Javascript实现div的toggle效果实例分析
2015/06/09 Javascript
javascript数组排序汇总
2015/07/07 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
2015/11/17 Javascript
EasyUI Pagination 分页的两种做法小结
2016/07/09 Javascript
JS+CSS3模拟溢出滚动效果
2016/08/12 Javascript
微信小程序获取手机号授权用户登录功能
2017/11/09 Javascript
vue和webpack打包项目相对路径修改的方法
2018/06/15 Javascript
vue实现通讯录功能
2018/07/14 Javascript
python回调函数用法实例分析
2015/05/09 Python
python实现的简单抽奖系统实例
2015/05/22 Python
简单谈谈python中的lambda表达式
2018/01/19 Python
Python面向对象之继承代码详解
2018/01/29 Python
Django使用HttpResponse返回图片并显示的方法
2018/05/22 Python
python调用摄像头显示图像的实例
2018/08/03 Python
Python matplotlib可视化实例解析
2020/06/01 Python
使paramiko库执行命令时在给定的时间强制退出功能的实现
2021/03/03 Python
完整版商业计划书
2014/09/15 职场文书
2014年维修电工工作总结
2014/11/20 职场文书
2015年消费者权益日活动总结
2015/02/09 职场文书
索赔员岗位职责
2015/02/15 职场文书
幼儿园辞职书
2015/02/26 职场文书
领导莅临指导欢迎词
2015/09/30 职场文书
想创业成功,需要掌握这些要点
2019/12/06 职场文书
Python中tkinter的用户登录管理的实现
2021/04/22 Python
解决Go gorm踩过的坑
2021/04/30 Golang
Nginx配置Https安全认证的实现
2021/05/26 Servers
浅谈PostgreSQL表分区的三种方式
2021/06/29 PostgreSQL