页面导航：首页 → 网络编程 → JavaScript → 应用技巧 → 正文内容

JS层移支示例代码

发布：dxy 发布日期：2007-3-12 字体：[增加减小] 类型：转载

点击运行可以看到效果:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML><HEAD><TITLE>课程安排</TITLE> 
<STYLE type=text/css>LABEL { 
    CURSOR: hand; COLOR: lightblue; TEXT-DECORATION: underline 
} 
</STYLE>

<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
//****************************************************************************************** 
//模块名称:拖动管理模块 
//******************************************************************************************

var drag_objects=new Array();        //拖动对象集合 
var drag_offsetX=0,drag_offsetY=0; 
var thisRegObj=null;

//可以拖动的对象 
function DragObject(element,minX,maxX,minY,maxY){ 
    //属性 
    this.element=element; 
    this.minX=minX; 
    this.maxX=maxX; 
    this.minY=minY; 
    this.maxY=maxY; 
    this.followObjects=new Array(); 
    //事件处理函数 
    this.onDragBegin=null; 
    this.onDragging=null; 
    this.onDragEnd=null; 
    //方法 
    this.addFollowObject=addDragFollowObject; 
}

//伴随移动的对象 
function FollowObject(element,offsetX,offsetY){ 
    this.element=element; 
    this.offsetX=offsetX; 
    this.offsetY=offsetY; 
}

//设置伴随移动的对象 
function addDragFollowObject(element){ 
    if (element==null) return; 
    var fo=new FollowObject(element,0,0); 
    this.followObjects[this.followObjects.length]=fo; 
}

function cancelDrag(){ 
    return(false); 
}

//改变对象的布局方式为绝对位置 
function setAbsolute(element){ 
    //var x=element.offsetLeft,y=element.offsetTop; 
    element.style.position="absolute"; 
    //element.style.left=x; 
    //element.style.top=y; 
}

//注册拖动对象,如果成功就返回该对象 
//element:Script对象 
//minX,maxX:X方向的限制拖动范围,null表示不限制,相等表示不能拖动 
//minY,maxY:Y方向的限制拖动范围,null表示不限制,相等表示不能拖动 
function registerDrag(element,minX,maxX,minY,maxY){ 
    if (element==null) return(null); 
    if (getRegObj(element)!=null) return(null); 
    //改变对象的布局方式 
    setAbsolute(element);     
    //禁止对象拖放 
    element.ondragstart=cancelDrag; 
    //注册对象 
    var obj=new DragObject(element,minX,maxX,minY,maxY); 
    drag_objects[drag_objects.length]=obj; 
    return(obj); 
}

//取消注册 
function unregDrag(element){ 
    for (var i=0;i<drag_objects.length;i++){ 
        if (element==drag_objects[i].element){ 
            //drag_objects.splice(i,1); 
            for(var j=i;j<drag_objects.length-1;j++) 
                drag_objects[j]=drag_objects[j+1]; 
            drag_objects.length--; 
            return(true); 
        } 
    } 
    return(false); 
}

function drag_doUp(){ 
    if (drag_orgMouseUpHandle!=null) drag_orgMouseUpHandle(); 
    if (thisRegObj==null) return; 
     
    //调用事件处理函数 
    if (thisRegObj.onDragEnd!=null) { 
        thisRegObj.onDragEnd(thisRegObj.element); 
    } 
    thisRegObj=null; 
}

function getRegObj(obj){ 
    for (var i=0;i<drag_objects.length;i++){ 
        if (obj==drag_objects[i].element) return(drag_objects[i]); 
    } 
    return(null); 
}

//挂钩处理消息函数 
var drag_orgMouseMoveHandle=document.onmousemove; 
document.onmousemove=drag_doMove; 
var drag_orgMouseDownHandle=document.onmousedown; 
document.onmousedown=drag_doDown; 
var drag_orgMouseUpHandle=document.onmouseup; 
document.onmouseup=drag_doUp;

//****************************************************************************************** 
//模块名称:坐标转换对象 
//******************************************************************************************

//Point对象 
function Point(x,y){ 
    //属性 
    this.x=x; 
    this.y=y; 
    //方法 
    this.clientToScreen=clientToScreen; 
    this.screenToClient=screenToClient; 
    this.clientToClient=clientToClient; 
}

//客户区坐标转换为屏幕(BODY)坐标 
function clientToScreen(srcElement){ 
    var offsetParent=srcElement; 
    //alert(this.x+" "+this.y); 
    while(offsetParent!=null && offsetParent.tagName.toUpperCase()!="BODY"){ 
        this.x+=offsetParent.offsetLeft; 
        this.y+=offsetParent.offsetTop; 
        offsetParent=offsetParent.offsetParent; 
        //alert(this.x+" "+this.y); 
    } 
}

//屏幕(BODY)坐标转换为客户区坐标 
function screenToClient(dstElement){ 
    var offsetParent=dstElement; 
    while(offsetParent!=null && offsetParent.tagName.toUpperCase()!="BODY"){ 
        this.x-=offsetParent.offsetLeft; 
        this.y-=offsetParent.offsetTop; 
        offsetParent=offsetParent.offsetParent; 
    } 
}

//客户区(src)坐标转换为客户区(dst)坐标 
function clientToClient(srcElement,dstElement){ 
    this.clientToScreen(srcElement); 
    this.screenToClient(dstElement); 
}

//把srcElement移动到dstElement的(x,y)处 
function absoluteMove(srcElement,dstElement,x,y){ 
    if (x==null) x=0; 
    if (y==null) y=0; 
    var pt=new Point(x,y); 
    pt.clientToClient(dstElement,srcElement.offsetParent); 
    srcElement.style.pixelLeft=pt.x; 
    srcElement.style.pixelTop=pt.y; 
} 
//--> 
</SCRIPT>

<META content="MSHTML 5.50.4134.600" name=GENERATOR></HEAD> 
<BODY onselectstart=return(false)> 
<SCRIPT language=JavaScript> 
    var newObj=null; 
    DragObject.prototype.bind=bindToCell; 
     
    //把拖动元素绑定到单元格 
    function bindToCell(cell){ 
        if (cell==null) return; 
        this.cell=cell; 
        absoluteMove(this.element,cell,(cell.offsetWidth-this.element.offsetWidth)/2,(cell.offsetHeight-this.element.offsetHeight)/2); 
    }

//当完成拖动后,调整位置 
    function finishDrag(element){ 
        var dragObj=getRegObj(element); 
        if (dragObj==null) return; 
        //按中点来计算位置 
        var pt=new Point(element.offsetWidth/2,element.offsetHeight/2); 
        pt.clientToScreen(element); 
        var oldZIndex=element.style.zIndex; 
        element.style.zIndex=-1000; 
        var cell=document.elementFromPoint(pt.x-document.body.scrollLeft,pt.y-document.body.scrollTop); 
        //拖动是否有效 
        if (cell!=null){ 
            if (cell.tagName=="TD"){ 
                //如果放在单元格上,就进行调整 
                var anotherDragObj=getDragObjectByCell(cell); 
                if (anotherDragObj==null){ 
                    dragObj.bind(cell); 
                } 
                else{ 
                    //交换 
                    anotherDragObj.bind(dragObj.cell); 
                    dragObj.bind(cell); 
                } 
            } 
            else{ 
                //如果不是放在单元格上,要查看是否属于DIV 
                var div=getParent(cell,"DIV"); 
                if (div!=null){ 
                    var anotherDragObj=getRegObj(div); 
                    if (anotherDragObj!=null){ 
                        //如果是另一个DragObject,就交换 
                        var c=anotherDragObj.cell; 
                        anotherDragObj.bind(dragObj.cell); 
                        dragObj.bind(c); 
                    } 
                    else{ 
                        dragObj.bind(dragObj.cell); 
                    } 
                } 
                else{ 
                    dragObj.bind(dragObj.cell); 
                } 
            } 
        } 
        else{ 
            //如果不是单元格,就还原 
            dragObj.bind(dragObj.cell); 
        } 
        element.style.zIndex=oldZIndex; 
    }

</SCRIPT> 
<FONT  
style="FONT-SIZE: 12px; LEFT: 50px; WIDTH: 100px; POSITION: absolute; TOP: 43px; TEXT-ALIGN: center"  
color=blue>待排课程  
<TABLE id=LeftTable style="LEFT: 50px; POSITION: absolute; TOP: 60px"  
cellSpacing=0 borderColorDark=white borderColorLight=black border=1> 
  <TBODY> 
  <TR> 
    <TD width=100 height=12> </TD>  
  <TR> 
    <TD width=100 height=12> </TD>  
  <TR> 
    <TD width=100 height=12> </TD>  
  <TR> 
    <TD width=100 height=12> </TD>  
  <TR> 
    <TD width=100 height=12> </TD>  
  <TR> 
    <TD width=100 height=12> </TD>  
  <TR> 
    <TD width=100 height=12> </TD>  
  <TR> 
    <TD width=100 height=12> </TD>  
  <TR> 
    <TD width=100 height=12> </TD>  
  <TR> 
    <TD width=100 height=12> </TD>  
  <TR> 
    <TD width=100 height=12> </TD>  
  <TR> 
    <TD width=100 height=12> </TD>  
  <TR> 
    <TD width=100 height=12> </TD>  
  <TR> 
    <TD width=100 height=12> </TD>  
  <TR> 
    <TD width=100 height=12> </TD>  
  <TR> 
    <TD width=100 height=12> </TD> </TR></TBODY></TABLE> 
    <FONT style="FONT-SIZE: 12px; LEFT: 220px; WIDTH: 150px; POSITION: absolute; TOP: 43px; TEXT-ALIGN: center" color=blue>已排课程(上午)  
<TABLE id=RightTable style="LEFT: 220px; POSITION: absolute; TOP: 60px"  
cellSpacing=0 borderColorDark=white borderColorLight=black border=1> 
  <TBODY> 
  <TR><TD width=150 height=20> </TD></TR> 
  <TR><TD width=150 height=20> </TD></TR> 
  <TR><TD width=150 height=20> </TD></TR> 
  <TR><TD width=150 height=20> </TD></TR> 
  </TBODY></TABLE> 
    <FONT style="FONT-SIZE: 12px; LEFT: 220px; WIDTH: 150px; POSITION: absolute; TOP: 153px; TEXT-ALIGN: center" color=blue>已排课程(下午)  
<TABLE id=Table2 style="LEFT: 220px; POSITION: absolute; TOP: 170px"  
cellSpacing=0 borderColorDark=white borderColorLight=black border=1> 
  <TBODY> 
  <TR><TD width=150 height=20> </TD></TR> 
  <TR><TD width=150 height=20> </TD></TR> 
  <TR><TD width=150 height=20> </TD></TR> 
  <TR><TD width=150 height=20> </TD></TR> 
  </TBODY></TABLE> 
    <FONT style="FONT-SIZE: 12px; LEFT: 220px; WIDTH: 150px; POSITION: absolute; TOP: 263px; TEXT-ALIGN: center" color=blue>已排课程(晚上)  
<TABLE id=Table2 style="LEFT: 220px; POSITION: absolute; TOP: 280px"  
cellSpacing=0 borderColorDark=white borderColorLight=black border=1> 
  <TBODY> 
  <TR><TD width=150 height=20> </TD></TR> 
  <TR><TD width=150 height=20> </TD></TR> 
  <TR><TD width=150 height=20> </TD></TR> 
  <TR><TD width=150 height=20> </TD></TR> 
  </TBODY></TABLE>

<DIV id=1 style="WIDTH: 100px; CURSOR: hand; POSITION: absolute; HEIGHT: 12px"  
align=center>语文</DIV> 
<SCRIPT language=JavaScript> 
            newObj=registerDrag(document.all("1")); 
            newObj.onDragEnd=finishDrag; 
            newObj.bind(document.all("LeftTable").rows(0).cells(0)); 
        </SCRIPT>

<DIV id=2 style="WIDTH: 100px; CURSOR: hand; POSITION: absolute; HEIGHT: 12px"  
align=center>数学</DIV> 
<SCRIPT language=JavaScript> 
            newObj=registerDrag(document.all("2")); 
            newObj.onDragEnd=finishDrag; 
            newObj.bind(document.all("LeftTable").rows(1).cells(0)); 
        </SCRIPT>

<DIV id=3 style="WIDTH: 100px; CURSOR: hand; POSITION: absolute; HEIGHT: 12px"  
align=center>物理</DIV> 
<SCRIPT language=JavaScript> 
            newObj=registerDrag(document.all("3")); 
            newObj.onDragEnd=finishDrag; 
            newObj.bind(document.all("LeftTable").rows(2).cells(0)); 
        </SCRIPT>

<DIV id=4 style="WIDTH: 100px; CURSOR: hand; POSITION: absolute; HEIGHT: 12px"  
align=center>化学</DIV> 
<SCRIPT language=JavaScript> 
            newObj=registerDrag(document.all("4")); 
            newObj.onDragEnd=finishDrag; 
            newObj.bind(document.all("LeftTable").rows(3).cells(0)); 
        </SCRIPT>

<DIV id=5 style="WIDTH: 100px; CURSOR: hand; POSITION: absolute; HEIGHT: 12px"  
align=center>英语</DIV> 
<SCRIPT language=JavaScript> 
            newObj=registerDrag(document.all("5")); 
            newObj.onDragEnd=finishDrag; 
            newObj.bind(document.all("LeftTable").rows(4).cells(0)); 
        </SCRIPT>

<DIV id=6 style="WIDTH: 100px; CURSOR: hand; POSITION: absolute; HEIGHT: 12px"  
align=center>政治</DIV> 
<SCRIPT language=JavaScript> 
            newObj=registerDrag(document.all("6")); 
            newObj.onDragEnd=finishDrag; 
            newObj.bind(document.all("LeftTable").rows(5).cells(0)); 
        </SCRIPT>

<SCRIPT language=JavaScript> 
    //重定位 
    function relocate(){ 
        for (var i=0;i<drag_objects.length;i++){ 
            drag_objects[i].bind(drag_objects[i].cell); 
        } 
    } 
     
    //提交到服务器 
    function saveChange(){ 
        var lngOrder,lngModuleID; 
        var table=document.all("RightTable"); 
        var lngIndex=0; 
        var strAction=""; 
         
        for (var i=0;i<table.rows.length;i++){ 
            var row=table.rows(i); 
            for (var j=0;j<row.cells.length;j++){ 
                var cell=row.cells(j); 
                var dragObj=getDragObjectByCell(cell); 
                if (dragObj!=null){ 
                    lngOrder=i*row.cells.length+j; 
                    lngModuleID=dragObj.element.id; 
                    if (strAction=="") 
                        strAction="?MID"+lngIndex+"="+lngModuleID+"&OR"+lngIndex+"="+lngOrder; 
                    else 
                        strAction=strAction+"&MID"+lngIndex+"="+lngModuleID+"&OR"+lngIndex+"="+lngOrder; 
                    lngIndex++; 
                } 
            } 
        } 
        if (lngIndex>0) strAction=strAction+"&count="+lngIndex; 
        strAction="MainPageCenter.jsp"+strAction; 
        window.location.href=strAction; 
    } 
     
    //根据绑定的Cell来得到DragObject 
    function getDragObjectByCell(cell){ 
        for (var i=0;i<drag_objects.length;i++){ 
            if (cell==drag_objects[i].cell) return(drag_objects[i]); 
        } 
        return(null); 
    }

//得到指定类型的父对象 
    function getParent(objChild,strParentType){ 
        var objParent=objChild; 
         
        if (strParentType==null || objChild==null) return(null); 
        strParentType=strParentType+""; 
        while (objParent!=null && objParent.tagName.toUpperCase()!=strParentType.toUpperCase()){ 
            //alert(objParent.tagName); 
            objParent=objParent.parentElement; 
        } 
        return(objParent); 
    } 
     
</SCRIPT> 
</BODY></HTML>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

Tags：JS层移支示例代码