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 相关文章推荐
基于jquery的复制网页内容到WORD的实现代码
Feb 16 Javascript
JavaScript基础知识之数据类型
Aug 06 Javascript
jQuery使用动态渲染表单功能完成ajax文件下载
Jan 15 Javascript
使用堆实现Top K算法(JS实现)
Dec 25 Javascript
javascript单页面手势滑屏切换原理详解
Mar 21 Javascript
改变checkbox默认选中状态及取值的实现代码
May 26 Javascript
JavaScript实现九九乘法表的简单实例
Jun 07 Javascript
vue单页缓存存在的问题及解决方案(小结)
Sep 25 Javascript
javascript中的event loop事件循环详解
Dec 14 Javascript
微信小程序 自定义弹窗实现过程(附代码)
Dec 05 Javascript
vue2路由方式--嵌套路由实现方法分析
Mar 06 Javascript
nuxt静态部署打包相对路径操作
Nov 06 Javascript
当鼠标移动到图片上时跟随鼠标显示放大的图片效果
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实现阿拉伯数字和罗马数字相互转换的方法
2015/04/17 PHP
PHP二维数组排序简单实现方法
2016/02/14 PHP
PHP递归遍历多维数组实现无限分类的方法
2016/05/06 PHP
PHP获取php,mysql,apche的版本信息及更多服务器信息
2021/03/09 PHP
用js实现下载远程文件并保存在本地的脚本
2008/05/06 Javascript
JavaScript 学习笔记 Black.Caffeine 09.11.28
2009/11/30 Javascript
ASP 过滤数组重复数据函数(加强版)
2010/05/31 Javascript
js 连接数据库如何操作数据库中的数据
2012/11/23 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
2014/05/28 Javascript
node.js中的console.error方法使用说明
2014/12/10 Javascript
javascript实现单击和双击并存的方法
2014/12/13 Javascript
javascript中indexOf技术详解
2015/05/07 Javascript
JavaScript判断FileUpload控件上传文件类型
2015/09/28 Javascript
编写高性能Javascript代码的N条建议
2015/10/12 Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
2018/09/25 Javascript
javascrit中undefined和null的区别详解
2019/04/07 Javascript
el-select数据过多懒加载的解决(loadmore)
2019/05/29 Javascript
javascript实现摄像头拍照预览
2019/09/30 Javascript
详解为element-ui的Select和Cascader添加弹层底部操作按钮
2020/02/07 Javascript
js仿京东放大镜效果
2020/08/09 Javascript
Python性能优化的20条建议
2014/10/25 Python
用Python中的__slots__缓存资源以节省内存开销的方法
2015/04/02 Python
使用Python发送邮件附件以定时备份MySQL的教程
2015/04/25 Python
pandas 空的dataframe 插入列名的示例
2018/10/30 Python
python用fsolve、leastsq对非线性方程组求解
2018/12/15 Python
通过python扫描二维码/条形码并打印数据
2019/11/14 Python
美国最大的香水连锁店官网:Perfumania
2016/08/15 全球购物
印刷工程专业应届生求职信
2013/09/29 职场文书
教育实习生的自我评价分享
2013/11/21 职场文书
暑期研修感言
2014/02/17 职场文书
局火灾防控工作方案
2014/05/25 职场文书
离婚起诉书范文2015
2015/05/19 职场文书
2015年领导班子工作总结
2015/05/23 职场文书
教师见习总结范文
2015/06/23 职场文书
Java面试题冲刺第十七天--基础篇3
2021/08/07 面试题
Java 实现限流器处理Rest接口请求详解流程
2021/11/02 Java/Android