使用JS实现拖动 BBCode版

yueguangyuan

浏览: 337211 次
性别:
来自: 新加坡

最近访客更多访客>>

tom2139779

in355hz

MartinDon

maye123

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Ruby on Rails & Ajax

Firefox IE Rails PHP JavaScript

这是我在07年上半年参与的一个项目（全部采用Rails实现，www.bocai188.com/forum，只是网站没人气，公司也不打算在上面扔钱了，呵呵）制作的页面拖动框，用于模仿JavaEye登陆框的效果，第一次记录的时候还有一些问题，经过修改后，已经将pixel，alpha问题改掉，将代码整理了一下上传上来，整个东西就可以直接用了

==================================================================
学习了一下用JavaScript实现拖动效果，找来网上的代码分析了一下然后照抄了个最简单的，将慢慢将它完善

现状：目前还不支持FireFox

不支持项（已知项）：pixelLeft、pixelTop、alpha(opacity=90)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
<HTML>  
<HEAD>  
<TITLE> Drag </TITLE>  
<style>  
*{font-size:12px}   
.dragTable{   
font-size:12px;   
border-top:1px solid #3366cc;   
margin-bottom: 10px;   
width:100%;   
background-color:#FFFFFF;   
}   
.dragTR{   
cursor:move;   
color:#7787cc;   
background-color:#e5eef9;   
}   
td{vertical-align:top;}   
#parentTable{   
border-collapse:collapse;   
letter-spacing:25px;   
}   
</style>  
<script language="JavaScript" type="text/javascript">  
/** 判断浏览器类型 */
var isMSIE = (navigator.appName == "Microsoft Internet Explorer");
/** 目标面板 */   
var tarElement=null;   
/** 实际被拖动面板 */   
var dragElement=null;   
/** 定义元素位置 */   
var downX,downY,tmp_o_x,tmp_o_y;   
  
var refElement=null;   
var dragActive=0;   
/** 是否在移动中 1为是 */   
var draging=0;   
  
function getEventElement (event){   
    if(event == null){   
        event = window.event;   
    }    
    return (event.srcElement ? event.srcElement : event.target);   
}   
  
/**   
 * onMouseDown触发事件   
 */   
 function readyDrag(event) {   
    dragActive = 1;   
  
    var eventObj = getEventElement(event);   
    // 非DIV元素不能被拖动   
    if(eventObj.tagName != "DIV") return;   
  
    // 将目标元素附给dragElement   
    dragElement = eventObj.parentNode;   
    // 复制一个tmpElement到目标面板   
    tarElement = dragElement.cloneNode(true);   
	setOpcity(tarElement,50);

    tarElement.style.zIndex=2;   
    dragElement.style.zIndxe=1;   
    tarElement.style.position="absolute";   
  
    if(dragElement.parentNode.tagName != "BODY"){   
        // 当选中可拖动元素时,初始化拖动元素的初始位置   
        // TODO pixelLeft仅被IE支持   
        dragElementdragElement.style.left = dragElement.offsetLeft + getLeft(dragElement.parentNode);   
        dragElementdragElement.style.top = dragElement.offsetTop + getTop(dragElement.parentNode);   
    }   
  
    //取得当前鼠标的绝对位置   
    downX=event.clientX;   
    downY=event.clientY;   
    //取得拖动元素当前的绝对位置   

    tmp_o_x=getLeft(dragElement);   
    tmp_o_y=getTop(dragElement);   
    tarElement.style.display="none";   
    document.body.appendChild(tarElement);   
    document.onmousemove=startDrag;   
 }   
  
document.onmouseup=endDrag;   

function getLeft(obj){
	if(isMSIE){
	  value = obj.style.pixelLeft;
	}else{
	  value = parseInt(obj.style.left, 10);
	}
	return value;
}

function setOpcity(obj,value){
    // alpha(opacity=50)仅被IE支持   
	if(isMSIE){
      obj.style.filter="alpha(opacity="+value+")";
	}else{
	  obj.style.MozOpacity=value*0.01;
	}
}

function getTop(obj){
	if(isMSIE){
	  value = obj.style.pixelTop;
	}else{
	  value = parseInt(obj.style.top, 10)
	}
	return value;
}
  
/**   
 * onMouseOver事件触发   
 */   
function startDrag(event){   
    var flag = false;
	if(isMSIE){
	  event = window.event;
	  if(event.button==1){
	    flag=true;
	  }
	}else{
	  if(event.button==0){
	    flag=true;
	  }
	}
    if(dragActive==1&&flag&&dragElement!=null&&tarElement!=null){   
        //当拖动动作进行、mouse button pressed、拖动物件存在、目标面板存在的情况下   
        tarElement.style.display="block";   
        tarElement.style.left=tmp_o_x+event.clientX-downX;   
        tarElement.style.top=tmp_o_y+event.clientY-downY;   
        dragElement.style.backgroundColor="#CCCCCC";   
        //游标样式   
        document.body.style.cursor="move";   
        draging=1;   
    }   
}   
  
/**   
 * onMouseUp时间触发   
 */   
function endDrag(event){   
    if(dragActive==1&&tarElement!=null){   
        //当拖动动作进行、目标面板存在的情况下   
        if(draging==1){   
            // 如果面板处于移动状态中，将原有面板移除    
			if(isMSIE){
				dragElement.removeNode(true);   
			}else{
				dragElement.removeChild(node);   
			}
            draging=0;   
        }   
  
        setOpcity(tarElement,100);
        tarElement.style.zIndex=1;   
        document.body.style.cursor="default";   
    }   
  
    dragElement=null;   
    tarElement=null;   
    dragActive=0;   
}   
</script>  
</HEAD>  
  
<BODY>  
<div id="div_one" class="div_one" style="position:absolute; left:116px; top:137px; width:433px; z-index:1; background-color: #FFFFFF; layer-background-color: #FFFFFF;">  
    <div onMouseDown="readyDrag(event)" style="cursor:move; border:1px solid #996666; background-color:#996666; height:20px" name="dragDIV" class="dragBar">  
        Window   
    </div>  
    <div class="textSheet" style="border:1px solid #996666;">Content<br></div>  
</div>  
</BODY>  
</HTML>

目前这个代码段无法在FireFox上运行，其中pixelleft是肯定无法在FireFox上执行，所以在网上找来了这个东西：
http://developer.mozilla.org/en/docs/Using_Web_Standards_in_your_Web_Pages
和
http://www.firefox.net.cn/newforum/viewtopic.php?p=33357
貌似有效果

http://www.spacespace.cn/read.php?148 通过搜索又发现了这个IE和FireFox下常见的不兼容处理办法，貌似透明度的问题也可以解决咯

label.rar (2 KB)
描述: 示例代码，经测试可以在IE6和Firefox2上正常运行：）
下载次数: 84

分享到：

Ruby on Rails 杂记 | 使用JS实现拖动

2006-12-29 11:04
浏览 3692
评论(2)
查看更多

2 楼 zjpsh 2008-06-29

看下

bbcode

1 楼 fei1985 2008-04-14

用框架做简单

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论