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入门教程(7) History历史对象
Jan 31 Javascript
单独使用CKFinder选择图片的方法
Aug 21 Javascript
33个优秀的 jQuery 图片展示插件分享
Mar 14 Javascript
js判断选择的时间是否大于今天的代码
Aug 20 Javascript
javascript中的事件代理初探
Mar 08 Javascript
js实现图片漂浮效果的方法
Mar 02 Javascript
jQuery基于ID调用指定iframe页面内的方法
Jul 06 Javascript
vue.js学习之vue-cli定制脚手架详解
Jul 02 Javascript
Angularjs 1.3 中的$parse实例代码
Sep 14 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
Dec 06 Javascript
vue点击自增和求和的实例代码
Nov 06 Javascript
基于js实现数组相邻元素上移下移
May 19 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 网上商城促销设计实例代码
2012/02/17 PHP
简单的php数据库操作类代码(增,删,改,查)
2013/04/08 PHP
解析zend Framework如何自动加载类
2013/06/28 PHP
PHP获取php,mysql,apche的版本信息示例代码
2014/01/16 PHP
php正则表达式获取内容所有链接
2015/07/24 PHP
PHP实现多维数组转字符串和多维数组转一维数组的方法
2015/08/08 PHP
jquery制作搜狐快站页面效果示例分享
2014/02/21 Javascript
学习JavaScript设计模式之状态模式
2016/01/08 Javascript
js跨域资源共享 基础篇
2016/07/02 Javascript
Angularjs之filter过滤器(推荐)
2016/11/27 Javascript
Javascript this 函数深入详解
2016/12/13 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
2017/02/09 Javascript
Angular.js去除页面中显示的空行方法示例
2017/03/30 Javascript
浅谈Node.js之异步流控制
2017/10/25 Javascript
axios拦截设置和错误处理方法
2018/03/05 Javascript
vuex 项目结构目录及一些简单配置介绍
2018/04/08 Javascript
微信小程序中换行空格(多个空格)写法详解
2018/07/10 Javascript
Vue v-for循环之@click点击事件获取元素示例
2019/11/09 Javascript
JS前后端实现身份证号验证代码解析
2020/07/23 Javascript
Javascript新手入门之字符串拼接与变量的应用
2020/12/03 Javascript
python之wxPython应用实例
2014/09/28 Python
Python中@property的理解和使用示例
2019/06/11 Python
python中delattr删除对象方法的代码分析
2020/12/15 Python
移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法
2018/09/19 HTML / CSS
英语生日邀请函
2014/01/23 职场文书
股东合作协议书
2014/04/14 职场文书
家长对学生的评语
2014/04/18 职场文书
装饰工程师岗位职责
2014/06/08 职场文书
小学学习雷锋活动总结
2014/07/03 职场文书
国际商务英语专业求职信
2014/07/08 职场文书
授权委托书协议书
2014/10/16 职场文书
检举信的写法
2019/04/10 职场文书
浅谈Python numpy创建空数组的问题
2021/05/25 Python
Go 通过结构struct实现接口interface的问题
2021/10/05 Golang
浅谈css实现背景颜色半透明的两种方法
2021/12/06 HTML / CSS
台式电脑蓝牙适配器怎么安装?台式电脑蓝牙适配器安装教程
2022/04/08 数码科技