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 UI皮肤定制
Jul 27 Javascript
Jquery Ajax学习实例7 Ajax所有过程事件分析示例
Mar 23 Javascript
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
Jun 27 Javascript
iScroll中事件点击触发两次解决方案
Mar 11 Javascript
JavaScript搜索字符串并将搜索结果返回到字符串的方法
Apr 06 Javascript
Javascript技术栈中的四种依赖注入小结
Feb 27 Javascript
详解angular2实现ng2-router 路由和嵌套路由
Mar 24 Javascript
基于js的变量提升和函数提升(详解)
Sep 17 Javascript
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
Apr 02 Javascript
layui 实现table翻页滚动条位置保持不变的例子
Sep 05 Javascript
浅谈vue项目用到的mock数据接口的两种方式
Oct 09 Javascript
使用React-Router实现前端路由鉴权的示例代码
Jul 26 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/11/27 PHP
Javascript实例教程(19) 使用HoTMetal(5)
2006/12/23 Javascript
最新优化收藏到网摘代码(digg,diigo)
2007/02/07 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
2011/06/27 Javascript
关于extjs treepanel复选框选中父节点与子节点的问题
2013/04/02 Javascript
jQuery学习之prop和attr的区别示例介绍
2013/11/15 Javascript
JavaScript中使用document.write向页面输出内容实例
2014/10/16 Javascript
JS实现仿新浪微博发布内容为空时提示功能代码
2015/08/19 Javascript
DOM 事件的深入浅出(一)
2016/12/05 Javascript
Vue.JS入门教程之自定义指令
2016/12/08 Javascript
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
2017/06/23 Javascript
详谈commonjs模块与es6模块的区别
2017/10/18 Javascript
JS/jQuery实现DIV延时几秒后消失或显示的方法
2018/02/12 jQuery
vue实现简单的日历效果
2020/09/24 Javascript
基于javascript实现日历功能原理及代码实例
2020/05/07 Javascript
Vue Element校验validate的实例
2020/09/21 Javascript
JavaScript中clientWidth,offsetWidth,scrollWidth的区别
2021/01/25 Javascript
Python 模板引擎的注入问题分析
2017/01/01 Python
python3写的简单本地文件上传服务器实例
2018/06/04 Python
seek引发的python文件读写的问题及解决
2019/07/26 Python
Python 类,property属性(简化属性的操作),@property,property()用法示例
2019/10/12 Python
用Python 爬取猫眼电影数据分析《无名之辈》
2020/07/24 Python
python 中关于pycharm选择运行环境的问题
2020/10/31 Python
为奢侈时尚带来了慈善元素:Olivela
2018/09/29 全球购物
索尼巴西商店:Sony巴西
2019/06/21 全球购物
考试不及格的检讨书
2014/01/22 职场文书
企业办公室岗位职责
2014/03/12 职场文书
吨的认识教学反思
2014/04/27 职场文书
植物生产学专业求职信
2014/08/08 职场文书
2014年大学宣传部工作总结
2014/12/19 职场文书
离职感谢信
2015/01/21 职场文书
致地震灾区的慰问信
2015/03/23 职场文书
装饰技术负责人岗位职责
2015/04/13 职场文书
学术会议领导致辞
2015/07/29 职场文书
优秀家长事迹材料(2016推荐版)
2016/02/29 职场文书
高三英语教学反思
2016/03/03 职场文书