手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
摘要:注意使用preventDefault防止浏览器的默认事件操作发生复制代码代码如下:varisDrag=false;functionisIE(...

注意使用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"></div>

<img id="elimg" src="http://www.cnit618.com/template/images/logo.gif" />

【js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器】相关文章:

js实现鼠标划过给div加透明度的方法

Node.js实现JS文件合并小工具

Jquery实现动态切换图片的方法

JavaScript实现鼠标拖动效果的方法

js实现鼠标经过表格行变色的方法

javascript实现行拖动的方法

js实现异步循环实现代码

javascript实现表格增删改操作实例详解

Javascript实现图片轮播效果(二)图片序列节点的控制实现

javascript结合Flexbox简单实现滑动拼图游戏

精品推荐
分类导航