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现实多行信息
Aug 26 Javascript
javascript多种数据类型表格排序代码分析
Sep 11 Javascript
百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换
Feb 19 Javascript
使用struts2+Ajax+jquery验证用户名是否已被注册
Mar 22 Javascript
解决vue-router进行build无法正常显示路由页面的问题
Mar 06 Javascript
基于vue-simplemde实现图片拖拽、粘贴功能
Apr 12 Javascript
node使用promise替代回调函数
May 07 Javascript
微信小程序实现topBar底部选择栏效果
Jul 20 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
Apr 10 Javascript
html-webpack-plugin修改页面的title的方法
Jun 18 Javascript
详解React 元素渲染
Jul 07 Javascript
vue 实现setInterval 创建和销毁实例
Jul 21 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实现小型站点广告管理
2006/10/09 PHP
PHP下一个非常全面获取图象信息的函数
2008/11/20 PHP
php处理带有中文URL的方法
2016/07/11 PHP
浅谈PHP的反射API
2017/02/26 PHP
Thinkphp5+plupload实现的图片上传功能示例【支持实时预览】
2019/05/08 PHP
JS处理VBArray的函数使用说明
2008/05/11 Javascript
用JavaScript将从数据库中读取出来的日期型格式化为想要的类型。
2009/08/15 Javascript
JavaScript实现大数的运算
2014/11/24 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
2014/11/28 Javascript
使用javascript实现简单的选项卡切换
2015/01/09 Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
2015/08/24 Javascript
浅析angularJS中的ui-router和ng-grid模块
2016/05/20 Javascript
canvas绘制万花筒效果(代码分享)
2017/01/20 Javascript
js正则表达式验证表单【完整版】
2017/03/06 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
2017/06/04 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
2017/08/04 Javascript
Vue项目服务器部署之子目录部署方法
2019/05/12 Javascript
swiper Scrollbar滚动条组件详解
2019/09/08 Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
2020/05/15 Javascript
[04:21]狐狸妈带你到现场 DOTA2 TI中国区预选赛线下赛路线指引
2014/05/22 DOTA
[01:37]TI4西雅图DOTA2前线报道 VG拿下首胜教练357给出获胜秘诀
2014/07/10 DOTA
理解Python中的With语句
2015/02/02 Python
Python中matplotlib中文乱码解决办法
2017/05/12 Python
使用 PyTorch 实现 MLP 并在 MNIST 数据集上验证方式
2020/01/08 Python
使用Python实现牛顿法求极值
2020/02/10 Python
Python中qutip用法示例详解
2020/10/02 Python
美国内衣品牌:Leonisa
2016/08/14 全球购物
某公司面试题
2012/03/05 面试题
保安的辞职报告怎么写
2014/01/20 职场文书
群众路线教育实践活动方案
2014/02/02 职场文书
老公保证书范文
2014/04/29 职场文书
2015年党风建设工作总结
2015/04/29 职场文书
上课讲话检讨书范文
2015/05/07 职场文书
看雷锋电影观后感
2015/06/10 职场文书
总结Python变量的相关知识
2021/06/28 Python
使用Nginx搭载rtmp直播服务器的方法
2021/10/16 Servers