首頁 >web前端 >js教程 >JS层移支示例代码_javascript技巧

JS层移支示例代码_javascript技巧

WBOY原創: 2016-05-16 19:16:57885瀏覽

<title>课程安排</title> 
<style type="text/css">LABEL { 
    CURSOR: hand; COLOR: lightblue; TEXT-DECORATION: underline 
} 
</style>

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>

//当完成拖动后,调整位置 
    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>
<tr> 
    <td width="100" height="12"> </td>  
  </tr>
<tr> 
    <td width="100" height="12"> </td>  
  </tr>
<tr> 
    <td width="100" height="12"> </td>  
  </tr>
<tr> 
    <td width="100" height="12"> </td>  
  </tr>
<tr> 
    <td width="100" height="12"> </td>  
  </tr>
<tr> 
    <td width="100" height="12"> </td>  
  </tr>
<tr> 
    <td width="100" height="12"> </td>  
  </tr>
<tr> 
    <td width="100" height="12"> </td>  
  </tr>
<tr> 
    <td width="100" height="12"> </td>  
  </tr>
<tr> 
    <td width="100" height="12"> </td>  
  </tr>
<tr> 
    <td width="100" height="12"> </td>  
  </tr>
<tr> 
    <td width="100" height="12"> </td>  
  </tr>
<tr> 
    <td width="100" height="12"> </td>  
  </tr>
<tr> 
    <td width="100" height="12"> </td>  
  </tr>
<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>

//得到指定类型的父对象 
    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>

</font></font></font></font>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：js防止重复点击或者点击过快方法下一篇：对YUI扩展的Gird组件 Part-1_YUI.Ext相关

看更多

JS层移支示例代码_javascript技巧

相關文章