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 相关文章推荐
一直复略了的一个问题,关于表单重复提交
Feb 15 Javascript
JS 学习笔记 防止发生命名冲突
Jul 30 Javascript
客户端限制只能上传jpg格式图片的js代码
Dec 09 Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
Jun 04 Javascript
js实现幻灯片播放图片示例代码
Nov 07 Javascript
JS对话框_JS模态对话框showModalDialog用法总结
Jan 11 Javascript
js实现的二分查找算法实例
Jan 21 Javascript
jquery ztree实现树的搜索功能
Feb 25 Javascript
JS弹出窗口的运用与技巧大全
Nov 01 Javascript
移动web开发之touch事件实例详解
Jan 17 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
Sep 28 Javascript
jQuery操作事件完整实例分析
Jan 10 jQuery
当鼠标移动到图片上时跟随鼠标显示放大的图片效果
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
Laravel 5框架学习之用户认证
2015/04/09 PHP
php跨服务器访问方法小结
2015/05/12 PHP
PHP实现随机发放扑克牌
2020/04/21 PHP
js prototype 格式化数字 By shawl.qiu
2007/04/02 Javascript
用Javascript实现锚点(Anchor)间平滑跳转
2009/09/08 Javascript
JavaScript中的集合及效率
2010/01/08 Javascript
js鼠标左右键 键盘值小结
2010/06/11 Javascript
DWR实现模拟Google搜索效果实现原理及代码
2013/01/30 Javascript
js弹出层(jQuery插件形式附带reLoad功能)
2013/04/12 Javascript
使用JavaScript获取地址栏参数的方法
2014/12/19 Javascript
实例详解ECMAScript5中新增的Array方法
2016/04/05 Javascript
js跨域资源共享 基础篇
2016/07/02 Javascript
H5上传本地图片并预览功能
2017/05/08 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
2017/06/29 Javascript
js验证身份证号码记录的方法
2019/04/26 Javascript
详解element-ui设置下拉选择切换必填和非必填
2019/06/17 Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
2019/10/10 Javascript
layui点击按钮页面会自动刷新的解决方案
2019/10/25 Javascript
Vue实现boradcast和dispatch的示例
2020/11/13 Javascript
详解Python中open()函数指定文件打开方式的用法
2016/06/04 Python
python中lambda()的用法
2017/11/16 Python
python中virtualenvwrapper安装与使用
2018/05/20 Python
Django forms组件的使用教程
2018/10/08 Python
python实现对指定字符串补足固定长度倍数截断输出的方法
2018/11/15 Python
用python标准库difflib比较两份文件的异同详解
2018/11/16 Python
在python中利用pycharm自定义代码块教程(三步搞定)
2020/04/15 Python
Html5上传图片 移动端、PC端通用代码
2016/06/08 HTML / CSS
Lululemon加拿大官网:加拿大知名体育服装零售商
2019/04/12 全球购物
大学学习个人的自我评价
2014/02/18 职场文书
关爱女孩行动实施方案
2014/03/13 职场文书
2014财务年度工作总结
2014/11/11 职场文书
驳回起诉民事裁定书
2015/05/19 职场文书
幼儿园毕业致辞
2015/07/29 职场文书
机械原理课程设计心得体会
2016/01/15 职场文书
Go语言实现一个简单的并发聊天室的项目实战
2022/03/18 Golang
Go归并排序算法的实现方法
2022/04/06 Golang