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 中令人困惑的变量赋值
Aug 13 Javascript
EasyUI中的tree用法介绍
Nov 01 Javascript
JS链式调用的实现方法
Mar 07 Javascript
在js中判断checkboxlist(.net控件客户端id)是否有选中
Apr 11 Javascript
javascript表单验证使用示例(javascript验证邮箱)
Jan 07 Javascript
json中换行符的处理方法示例介绍
Jun 10 Javascript
基于jQuery实现动态数字展示效果
Aug 12 Javascript
浅谈react前后端同构渲染
Sep 20 Javascript
利用Blob进行文件上传的完整步骤
Aug 02 Javascript
Vue加载json文件的方法简单示例
Jan 28 Javascript
vue子路由跳转实现tab选项卡
Jul 24 Javascript
优化Vue中date format的性能详解
Jan 13 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中json_decode()和json_encode()的使用方法
2012/06/04 PHP
PHP给文字内容中的关键字进行套红处理
2016/04/12 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
PHP实现分布式memcache设置web集群session同步的方法
2018/04/10 PHP
js 页面执行时间计算代码
2009/03/04 Javascript
文本框中禁止非数字字符输入比如手机号码、邮编
2013/08/19 Javascript
Jquery操作radio的简单实例
2014/01/06 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
2014/09/01 Javascript
一个css与js结合的下拉菜单支持主流浏览器
2014/10/08 Javascript
jquery搜索框效果实现方法
2015/01/16 Javascript
jquery中JSON的解析方式
2015/03/16 Javascript
JavaScript中使用自然对数ln的方法
2015/06/14 Javascript
node模块机制与异步处理详解
2016/03/13 Javascript
jquery判断input值不为空的方法
2016/06/05 Javascript
JavaScript仿网易选项卡制作代码
2016/10/06 Javascript
vue自定v-model实现表单数据双向绑定问题
2018/09/03 Javascript
详解基于webpack&amp;gettext的前端多语言方案
2019/01/29 Javascript
微信小程序生成二维码的示例代码
2019/03/29 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
2019/10/30 Javascript
JavaScript随机数的组合问题案例分析
2020/05/16 Javascript
vue离开当前页面触发的函数代码
2020/09/01 Javascript
Openlayers实现地图的基本操作
2020/09/28 Javascript
python实现比较两段文本不同之处的方法
2015/05/30 Python
Python实现高效求解素数代码实例
2015/06/30 Python
详解Golang 与python中的字符串反转
2017/07/21 Python
python3实现表白神器
2019/04/09 Python
pandas中read_csv、rolling、expanding用法详解
2020/04/21 Python
世界上最具创新性的增强型知名运动品牌:Proviz
2018/04/03 全球购物
介绍一下Java的事务处理
2012/12/07 面试题
创建无烟单位实施方案
2014/03/29 职场文书
煤矿安全生产责任书
2014/04/15 职场文书
生物学专业求职信
2014/07/23 职场文书
学校关爱留守儿童活动方案
2014/08/27 职场文书
镇党委书记群众路线整改措施思想汇报
2014/10/13 职场文书
高中生期中考试失利检讨书
2014/10/23 职场文书
小喇叭开始广播了! 四十多年前珍贵老照片
2022/05/09 无线电