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中OnLoad几种使用方法
Dec 15 Javascript
javascript 三种方法实现获得和设置以及移除元素属性
Mar 20 Javascript
用显卡加速,轻松把笔记本打造成取暖器的办法!
Apr 17 Javascript
javascript-简单的计算器实现步骤分解(附图)
May 30 Javascript
JS对select控件option选项的增删改查示例代码
Oct 21 Javascript
javascript制作的cookie封装及使用指南
Jan 02 Javascript
JavaScript里实用的原生API汇总
May 14 Javascript
理解javascript函数式编程中的闭包(closure)
Mar 08 Javascript
微信小程序 获取javascript 里的数据
Aug 17 Javascript
vue-router启用history模式下的开发及非根目录部署方法
Dec 23 Javascript
原生JavaScript创建不可变对象的方法简单示例
May 07 Javascript
解决vue项目 build之后资源文件找不到的问题
Sep 12 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使用ActiveMQ实例
2018/02/05 PHP
动态刷新 dorado树的js代码
2009/06/12 Javascript
JS异常处理的一个想法(sofish)
2013/03/14 Javascript
JavaScript弹出窗口方法汇总
2014/08/12 Javascript
JS取得绝对路径的实现代码
2015/01/16 Javascript
jquery 插件实现瀑布流图片展示实例
2015/04/03 Javascript
JS实现简单路由器功能的方法
2015/05/27 Javascript
7个jQuery最佳实践
2016/01/12 Javascript
原生js实现addClass,removeClass,hasClass方法
2016/04/27 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
2016/09/23 Javascript
JS控制HTML元素的显示和隐藏的两种方法
2016/09/27 Javascript
jQuery自定义多选下拉框效果
2017/06/19 jQuery
webpack踩坑之路图片的路径与打包
2017/09/05 Javascript
基于JavaScript实现抽奖系统
2018/01/16 Javascript
100行代码实现一个vue分页组功能
2018/11/06 Javascript
微信小程序实现banner图轮播效果
2020/06/28 Javascript
JS中的防抖与节流及作用详解
2019/04/01 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
2019/05/12 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
2020/04/07 Javascript
[40:10]2015国际邀请赛全明星表演赛
2015/08/07 DOTA
[58:42]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第一局
2016/02/27 DOTA
[38:32]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第二局
2016/02/26 DOTA
利用python获得时间的实例说明
2013/03/25 Python
python常用函数详解
2016/09/13 Python
修改Pandas的行或列的名字(重命名)
2019/12/18 Python
css3媒体查询中device-width和width的区别详解
2020/03/27 HTML / CSS
交通安全演讲稿
2014/01/07 职场文书
学雷锋标兵事迹材料
2014/08/18 职场文书
高中教师先进事迹材料
2014/08/22 职场文书
大学生第一学年自我鉴定
2014/09/12 职场文书
镇党委书记群众路线整改措施思想汇报
2014/10/13 职场文书
收入及婚姻状况证明
2014/11/20 职场文书
创业计划书之餐饮馄饨店
2019/07/18 职场文书
Navicat连接MySQL错误描述分析
2021/06/02 MySQL
OpenCV-Python使用cv2实现傅里叶变换
2021/06/09 Python
Python闭包的定义和使用方法
2022/04/11 Python