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入门学习书籍推荐
Jun 12 Javascript
js字符串日期yyyy-MM-dd转化为date示例代码
Mar 06 Javascript
当某个文本框成为焦点时即清除文本框内容
Apr 28 Javascript
JavaScript 获取任一float型小数点后两位的小数
Jun 30 Javascript
运用jQuery定时器的原理实现banner图片切换
Oct 22 Javascript
js实现文本框宽度自适应文本宽度的方法
Aug 13 Javascript
JavaScript 中有关数组对象的方法(详解)
Aug 15 Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
Feb 11 Javascript
Vue批量图片显示时遇到的路径被解析问题
Mar 28 Javascript
详解vue中使用微信jssdk
Apr 19 Javascript
深入学习JavaScript中的bom
May 27 Javascript
Vite和Vue CLI的优劣
Jan 30 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 5.0对象模型深度探索之绑定
2006/09/05 PHP
浅析php如何实现App常用的秒发功能
2016/08/03 PHP
ThinkPHP发送邮件示例代码
2016/10/08 PHP
laravel框架查询数据集转为数组的两种方法
2019/10/10 PHP
在javascript将NodeList作为Array数组处理的方法
2010/07/09 Javascript
常用js字符串判断方法整理
2013/10/18 Javascript
JS中判断null、undefined与NaN的方法
2014/03/24 Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
2014/06/05 Javascript
理解javascript异步编程
2016/01/27 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
2016/09/21 Javascript
JS刷新父窗口的几种方式小结(推荐)
2016/11/09 Javascript
深入理解jQuery()方法的构建原理
2016/12/05 Javascript
JS限制条件补全问题实例分析
2016/12/16 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
2017/02/21 Javascript
jQuery布局组件EasyUI Layout使用方法详解
2017/02/28 Javascript
详解Angular 4 表单快速入门
2017/06/05 Javascript
vue 2.0项目中如何引入element-ui详解
2017/09/06 Javascript
基于Node.js模板引擎教程-jade速学与实战1
2017/09/17 Javascript
通过js动态创建标签,并设置属性方法
2018/02/24 Javascript
JavaScript对JSON数组简单排序操作示例
2019/01/31 Javascript
nodemon实现Typescript项目热更新的示例代码
2019/11/19 Javascript
vue项目中在可编辑div光标位置插入内容的实现代码
2020/01/07 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
2020/04/10 Javascript
vue使用vant中的checkbox实现全选功能
2020/11/17 Vue.js
[01:52]2014DOTA2西雅图邀请赛 V社开大会你不知道的小秘密
2014/07/08 DOTA
[01:46]辉夜杯—打造中国DOTA新格局
2015/12/25 DOTA
浅析python中的迭代与迭代对象
2018/10/08 Python
Python3 执行系统命令并获取实时回显功能
2019/07/09 Python
python matplotlib饼状图参数及用法解析
2019/11/04 Python
腾讯公司的一个sql题
2013/01/22 面试题
商务日语毕业生自荐信
2013/11/23 职场文书
员工培训心得体会
2013/12/30 职场文书
暑期社会实践感言
2014/02/25 职场文书
募捐感谢信
2015/01/22 职场文书
自荐信范文
2019/05/20 职场文书
分析MySQL优化 index merge 后引起的死锁
2022/04/19 MySQL