您的位置:首页 > 理论基础 > 计算机网络

兼容浏览器(IE,火狐,谷歌)js实现拖拽效果从<http://www.jb51.net/article/38034.htm>转载

2014-06-06 17:29 936 查看
<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">
hello,大家好
</div>
<img id="elimg" style="left:609px;top:113px;position:absolute" src="1.jpg" />
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: