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 isPrototypeOf和hasOwnProperty使用区别
Mar 04 Javascript
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
May 10 Javascript
SyntaxHighlighter语法高亮插件使用说明
Aug 14 Javascript
弹出层之1:JQuery.Boxy (一) 使用介绍
Oct 06 Javascript
JS重要知识点小结
Nov 06 Javascript
JS远程获取网页源代码实例
Sep 05 Javascript
js实现点击添加一个input节点
Dec 05 Javascript
JS实现控制表格只显示行边框或者只显示列边框的方法
Mar 31 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
Aug 31 Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
Jul 27 Javascript
vue中路由参数传递可能会遇到的坑
Dec 07 Javascript
一次微信小程序内地图的使用实战记录
Sep 09 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
玩家交还《星际争霸》原始码光盘 暴雪报以厚礼
2017/05/05 星际争霸
第五节--克隆
2006/11/16 PHP
jq的get传参数在utf-8中乱码问题的解决php版
2008/07/23 PHP
PHP实现异步调用方法研究与分享
2011/10/27 PHP
解析crontab php自动运行的方法
2013/06/24 PHP
php设计模式之单例模式使用示例
2014/01/20 PHP
ThinkPHP2.x防范XSS跨站攻击的方法
2015/09/25 PHP
Laravel框架基于ajax和layer.js实现无刷新删除功能示例
2019/01/17 PHP
动态加载js文件 document.createElement
2006/10/14 Javascript
基于jquery的让页面控件不可用的实现代码
2010/04/27 Javascript
用Javascript评估用户输入密码的强度(Knockout版)
2011/11/30 Javascript
jquery实现的一个导航滚动效果具体代码
2013/05/27 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
2016/01/15 Javascript
功能强大的Bootstrap组件(结合js)
2016/08/03 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
2016/12/12 Javascript
Node.js pipe实现源码解析
2017/08/12 Javascript
Validform验证时可以为空否则按照指定格式验证
2017/10/20 Javascript
js 将线性数据转为树形的示例代码
2019/05/28 Javascript
Javascript var变量删除原理及实现
2020/08/26 Javascript
[10:39]DOTA2上海特级锦标赛音乐会纪录片
2016/03/21 DOTA
Python实现的简单发送邮件脚本分享
2014/11/07 Python
Python实现telnet服务器的方法
2015/07/10 Python
python dict 字典 以及 赋值 引用的一些实例(详解)
2017/01/20 Python
python urllib爬取百度云连接的实例代码
2017/06/19 Python
Python 实现一行输入多个值的方法
2018/04/21 Python
Python实现两个list求交集,并集,差集的方法示例
2018/08/02 Python
用python给自己做一款小说阅读器过程详解
2019/07/11 Python
Django微信小程序后台开发教程的实现
2020/06/03 Python
德国足球商店:OUTFITTER
2019/05/06 全球购物
上海期货面试题
2014/01/31 面试题
导航工程专业自荐信
2014/09/02 职场文书
作风建设年活动实施方案
2014/10/24 职场文书
小学推普周活动总结
2015/05/07 职场文书
导游词之泉州崇武古城
2019/12/20 职场文书
MySQL系列之十五 MySQL常用配置和性能压力测试
2021/07/02 MySQL
Go gRPC进阶教程gRPC转换HTTP
2022/06/16 Golang