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 相关文章推荐
不用ajax实现点击文字即可编辑的方法
Dec 16 Javascript
javascript 支持链式调用的异步调用框架Async.Operation
Aug 04 Javascript
jquery 插件学习(二)
Aug 06 Javascript
javascript window.confirm确认 取消对话框实现代码小结
Oct 21 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
Aug 21 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
Feb 17 Javascript
简单实现JavaScript图片切换效果
Nov 28 Javascript
详解Node.js中exports和module.exports的区别
Apr 19 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
Feb 22 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
对node通过fs模块判断文件是否是文件夹的实例讲解
Jun 10 Javascript
VUE递归树形实现多级列表
Jul 15 Vue.js
当鼠标移动到图片上时跟随鼠标显示放大的图片效果
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无限级栏目分类读取的实现代码
2014/02/19 PHP
Yii数据库缓存实例分析
2016/03/29 PHP
浅谈PHP值mysql操作类
2016/06/29 PHP
javascript encodeURI和encodeURIComponent的比较
2010/04/03 Javascript
javascript移动设备Web开发中对touch事件的封装实例
2014/06/05 Javascript
js+canvas简单绘制圆圈的方法
2016/01/28 Javascript
详解javascript跨浏览器事件处理程序
2016/03/27 Javascript
关于cookie的初识和运用(js和jq)
2016/04/07 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
2016/06/01 Javascript
Vue动态实现评分效果
2017/05/24 Javascript
JS实现的杨辉三角【帕斯卡三角形】算法示例
2019/02/26 Javascript
微信小程序 弹窗输入组件的实现解析
2019/08/12 Javascript
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
2019/09/03 jQuery
JavaScript语法约定和程序调试原理解析
2020/11/03 Javascript
[02:24]DOTA2痛苦女王 英雄基础教程
2013/11/26 DOTA
python在多玩图片上下载妹子图的实现代码
2013/08/13 Python
Python实现的简单算术游戏实例
2015/05/26 Python
python通过socket查询whois的方法
2015/07/18 Python
Python的Flask框架中的Jinja2模板引擎学习教程
2016/06/30 Python
Python使用win32 COM实现Excel的写入与保存功能示例
2018/05/03 Python
Python对切片命名的实现方法
2018/10/16 Python
Python告诉你木马程序的键盘记录原理
2019/02/02 Python
详解如何设置Python环境变量?
2019/05/13 Python
python+selenium实现简历自动刷新的示例代码
2019/05/20 Python
python文件绝对路径写法介绍(windows)
2019/12/25 Python
Python求两个字符串最长公共子序列代码实例
2020/03/05 Python
python中tab键是什么意思
2020/06/18 Python
Python控制鼠标键盘代码实例
2020/12/08 Python
python中time、datetime模块的使用
2020/12/14 Python
瑞典最好的运动鞋专卖店:Sneakersnstuff
2016/08/29 全球购物
床上用品全球在线购物:BeddingInn
2016/12/18 全球购物
澳大利亚在线购买儿童玩具:Toy Universe
2017/12/28 全球购物
世界上最大的皮肤科医生拥有和经营的美容网站:LovelySkin
2021/01/03 全球购物
学校2014重阳节活动策划方案
2014/09/16 职场文书
python设置 matplotlib 正确显示中文的四种方式
2021/05/10 Python
Qt数据库应用之实现图片转pdf
2022/06/01 Java/Android