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 相关文章推荐
js function定义函数使用心得
Apr 15 Javascript
jQuery Validate 验证,校验规则写在控件中的具体实例
Feb 27 Javascript
js生成动态表格并为每个单元格添加单击事件的方法
Apr 14 Javascript
jquery的ajax异步请求接收返回json数据实例
Jun 16 Javascript
jQuery圆形统计图开发实例
Jan 04 Javascript
浅谈javascript中this在事件中的应用
Feb 15 Javascript
javascript 面向对象function详解及实例代码
Feb 28 Javascript
利用webstrom调试Vue.js单页面程序的方法教程
Jun 06 Javascript
JavaScript设计模式之策略模式详解
Jun 09 Javascript
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
Jul 31 Javascript
js实现动态增加文件域表单功能
Oct 22 Javascript
vue-cli3环境变量与分环境打包的方法示例
Feb 18 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生成QRcode实例
2014/09/22 PHP
Yii全局函数用法示例
2017/01/22 PHP
php swoole多进程/多线程用法示例【基于php7nts版】
2019/08/12 PHP
Bookmarklet实现启动jQuery(模仿 云输入法)
2010/09/15 Javascript
Javascript Throttle &amp; Debounce应用介绍
2013/03/19 Javascript
Angular 根据 service 的状态更新 directive
2016/04/03 Javascript
JavaScript获取URL参数的方法之一
2017/03/24 Javascript
JavaScript ES6中const、let与var的对比详解
2017/06/18 Javascript
JavaScript中最常用的10种代码简写技巧总结
2017/06/28 Javascript
JS原生数据双向绑定实现代码
2017/08/14 Javascript
jQuery EasyUI开发技巧总结
2017/09/26 jQuery
jquery的 filter()方法使用教程
2018/03/22 jQuery
node省市区三级数据性能测评实例分析
2019/11/06 Javascript
Vue父子传递实例讲解
2020/02/14 Javascript
ES6中Set和Map用法实例详解
2020/03/02 Javascript
vue实现点击按钮“查看详情”弹窗展示详情列表操作
2020/09/09 Javascript
[01:17:55]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
python连接池实现示例程序
2013/11/26 Python
python编码最佳实践之总结
2016/02/14 Python
python如何重载模块实例解析
2018/01/25 Python
Python安装模块的常见问题及解决方法
2018/02/05 Python
Python模拟随机游走图形效果示例
2018/02/06 Python
python requests爬取高德地图数据的实例
2018/11/10 Python
使用Python实现跳帧截取视频帧
2019/05/31 Python
python循环定时中断执行某一段程序的实例
2019/06/29 Python
如何给Python代码进行加密
2020/01/10 Python
Python3 利用face_recognition实现人脸识别的方法
2020/03/13 Python
Django实现将views.py中的数据传递到前端html页面,并展示
2020/03/16 Python
Marc Jacobs彩妆官网:Marc Jacobs Beauty
2017/07/03 全球购物
请解释virtual关键字的含义
2015/06/17 面试题
2014全国两会学习心得体会1000字
2014/03/10 职场文书
《莫泊桑拜师》教学反思
2014/04/23 职场文书
上党课的心得体会
2014/09/02 职场文书
体育教师教学随笔
2015/08/15 职场文书
CSS作用域(样式分割)的使用汇总
2021/11/07 HTML / CSS
详解Spring Security中的HttpBasic登录验证模式
2022/03/17 Java/Android