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 相关文章推荐
收藏一些不常用,但是有用的代码
Mar 12 Javascript
IE6下js通过css隐藏select的一个bug
Aug 16 Javascript
使用Json比用string返回数据更友好,也更面向对象一些
Sep 13 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
May 20 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
Nov 26 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
Aug 06 Javascript
BootStrap文件上传样式超好看【持续更新】
May 10 Javascript
详解JavaScript中的事件流和事件处理程序
May 20 Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
Aug 19 Javascript
微信小程序使用request网络请求操作实例
Dec 15 Javascript
JavaScript装箱及拆箱boxing及unBoxing用法解析
Jun 15 Javascript
JS+Canvas实现五子棋游戏
Aug 26 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实现批量查询清除一句话后门的代码
2008/01/20 PHP
php增删改查示例自己写的demo
2013/09/04 PHP
destoon出现验证码不显示时的紧急处理方法
2014/08/22 PHP
检测codeigniter脚本消耗内存情况的方法
2015/03/21 PHP
Nigma vs Liquid BO3 第二场2.13
2021/03/10 DOTA
Javascript 模式实例 观察者模式
2009/10/24 Javascript
jquery.combobox中文api和例子,修复了上面的小bug
2011/03/28 Javascript
Javascript事件实例详解
2013/11/06 Javascript
jquery中的$(document).ready()使用小结
2014/02/14 Javascript
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
2014/05/05 Javascript
Ubuntu 16.04 64位中搭建Node.js开发环境教程
2016/10/19 Javascript
js简易版购物车功能
2017/06/17 Javascript
bootstrap multiselect下拉列表功能
2017/08/22 Javascript
VUE重点问题总结
2018/03/19 Javascript
JavaScript代码实现txt文件的上传预览功能
2018/03/27 Javascript
微信小程序实现拍照画布指定区域生成图片
2019/07/18 Javascript
vue+axios实现post文件下载
2019/09/25 Javascript
JavaScript实现留言板案例
2020/03/17 Javascript
wxPython中文教程入门实例
2014/06/09 Python
用实例详解Python中的Django框架中prefetch_related()函数对数据库查询的优化
2015/04/01 Python
Python批处理更改文件名os.rename的方法
2018/10/26 Python
python 提取key 为中文的json 串方法
2018/12/31 Python
python 读取二进制 显示图片案例
2020/04/24 Python
css3模拟jq点击事件的实例代码
2017/07/06 HTML / CSS
Belle Maison倍美丛官网:日本千趣会旗下邮购网站
2016/07/22 全球购物
德国家具在线:Fashion For Home
2017/03/11 全球购物
美国伴娘礼服商店:Evening Collective
2019/10/07 全球购物
毕业生求职的求职信
2013/12/05 职场文书
工伤赔偿协议书
2014/04/15 职场文书
经典禁毒标语
2014/06/16 职场文书
五一促销活动总结
2014/07/01 职场文书
个人维稳承诺书
2015/05/04 职场文书
行政处罚听证告知书
2015/07/01 职场文书
婚宴致辞
2015/07/28 职场文书
教你怎么用PyCharm为同一服务器配置多个python解释器
2021/05/31 Python
Python操作CSV格式文件的方法大全
2021/07/15 Python