posts - 97,  comments - 93,  trackbacks - 0
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>拖拽Demo</title>
<style type="text/CSS">
body

{

    margin:0px;

}

 

#aim

{

    position:absolute;

    width:200px;

    height:30px;

    border:1px solid #666666;

    background-color:#FFCCCC;

}

 

#sourceLayer, #cloneLayer

{

    position:absolute;

    width:300px;

    height:50px;

    border:1px solid #666666;

    background-color:#CCCCCC;

    cursor:move;

}

 

.docked

{

    display:none;

    filter:alpha(opacity=100);

}

 

.actived

{

    display:block;

    filter:alpha(opacity=70);

}

</style>

</head>

 

<body >

 

<div id="aim">locate</div>

<div id="sourceLayer" unselectable="off"><img src="http://www.baidu.com/img/logo.gif" alt="Drag Demo">Source of the demo</div>

<div id="cloneLayer" class="docked" unselectable="off"></div>


<script type="text/javascript" language="javascript">


var aim;

var sourceLayer;

var cloneLayer;

var aimX;

var aimY;

var orgnX;

var orgnY;

var draging = false;

var offsetX = 0;    

var offsetY = 0;    

var back;        

var thisX ;        

var thisY ;        

var time ;

var stepX ;        

var stepY ;       



 

function getLayer(inAim,inSource,inClone)

{

    aim = document.getElementById(inAim);

    sourceLayer = document.getElementById(inSource);

    cloneLayer = document.getElementById(inClone);

}

 

function initDrag(initAimX,initAimY,initOrgnX,initOrgnY)

{

    aimX = initAimX;

    aimY = initAimY;

    orgnX = initOrgnX;

    orgnY = initOrgnY;

    aim.style.pixelLeft = aimX;

    aim.style.pixelTop = aimY;

    sourceLayer.style.pixelLeft = orgnX;

    sourceLayer.style.pixelTop = orgnY;

    cloneLayer.style.pixelLeft = orgnX;

    cloneLayer.style.pixelTop = orgnY;

}


function BeforeDrag()

{

    if (event.button != 1)

    {

        return;

    }

    cloneLayer.innerHTML = sourceLayer.innerHTML; 容

    offsetX = document.body.scrollLeft + event.clientX - sourceLayer.style.pixelLeft;

    offsetY = document.body.scrollTop + event.clientY - sourceLayer.style.pixelTop;

    cloneLayer.className = "actived";

    draging = true;

}



function OnDrag()

{

    if(!draging)

    {

        return;

    }

    event.returnValue = false;

    cloneLayer.style.pixelLeft = document.body.scrollLeft + event.clientX - offsetX;

    cloneLayer.style.pixelTop = document.body.scrollTop + event.clientY - offsetY;

}

function EndDrag()

{

    if (event.button != 1)

    {

        return;

    }

    draging = false;

 

    if (event.clientX >= aim.style.pixelLeft && event.clientX <= (aim.style.pixelLeft + aim.offsetWidth) &&

        event.clientY >= aim.style.pixelTop && event.clientY <= (aim.style.pixelTop + aim.offsetHeight))

    {


        sourceLayer.style.pixelLeft = aim.style.pixelLeft;

        sourceLayer.style.pixelTop = aim.style.pixelTop;

         cloneLayer.className = "docked";



    }

    else

    {

     thisX = cloneLayer.style.pixelLeft;

     thisY = cloneLayer.style.pixelTop;

     offSetX = Math.abs(thisX - orgnX);

     offSetY = Math.abs(thisY - orgnY);

     time = 500;

     stepX = Math.floor((offSetX/time)*20);

     stepY = Math.floor((offSetY/time)*20);

     if(stepX == 0)

         stepX = 2;

     if(stepY == 0)

         stepY = 2;

     moveStart();

    }   

}

 

 

function moveStart()

{

     back = setInterval("MoveLayer();",15);

}

 

function MoveLayer()

{


     if(cloneLayer.style.pixelLeft <= orgnX && cloneLayer.style.pixelTop <= orgnY)

     {

         cloneLayer.style.pixelLeft += stepX;

         cloneLayer.style.pixelTop += stepY;


         if(cloneLayer.style.pixelLeft > orgnX)

         {

              stepX = 1;

         }

         if(cloneLayer.style.pixelTop > orgnY)

         {

              stepY = 1;

         }

         //if the coordinate of X Y  are  same

         if(cloneLayer.style.pixelLeft == orgnX)

         {

              stepX = 0;

         }

         if(cloneLayer.style.pixelTop == orgnY)

         {

              stepY = 0;

         }

         if(cloneLayer.style.pixelLeft == orgnX && cloneLayer.style.pixelTop == orgnY)

         {

              EndMove();

         }

     }

    

     //locate to the downleft of the object

     else if(cloneLayer.style.pixelLeft <= orgnX && cloneLayer.style.pixelTop >= orgnY)

     {

         cloneLayer.style.pixelLeft += stepX;

         cloneLayer.style.pixelTop -= stepY;

         if(cloneLayer.style.pixelLeft > orgnX)

         {

              stepX = 1;

         }

         if(cloneLayer.style.pixelTop < orgnY)

         {

              stepY = 1;

         }

         if(cloneLayer.style.pixelLeft == orgnX)

         {

              stepX = 0;

         }

         if(cloneLayer.style.pixelTop == orgnY)

         {

              stepY = 0;

         }

         if(cloneLayer.style.pixelLeft == orgnX && cloneLayer.style.pixelTop == orgnY)

         {

              EndMove();

         }

     }



     else if(cloneLayer.style.pixelLeft >= orgnX && cloneLayer.style.pixelTop <= orgnY)

     {

         cloneLayer.style.pixelLeft -= stepX;

         cloneLayer.style.pixelTop += stepY;

         if(cloneLayer.style.pixelLeft < orgnX)

         {

              stepX = 1;

         }

         if(cloneLayer.style.pixelTop > orgnY)

         {

              stepY = 1;

         }

         if(cloneLayer.style.pixelLeft == orgnX)

         {

              stepX = 0;

         }

         if(cloneLayer.style.pixelTop == orgnY)

         {

              stepY = 0;

         }

         if(cloneLayer.style.pixelLeft == orgnX && cloneLayer.style.pixelTop == orgnY)

         {

              EndMove();

         }

     }

    

     //locate to the right of the object

     else if(cloneLayer.style.pixelLeft >= orgnX && cloneLayer.style.pixelTop >= orgnY)

     {

         cloneLayer.style.pixelLeft -= stepX;

         cloneLayer.style.pixelTop -= stepY;

         if(cloneLayer.style.pixelLeft < orgnX)

         {

              stepX = 1;

         }

         if(cloneLayer.style.pixelTop < orgnY)

         {

              stepY = 1;

         }

         if(cloneLayer.style.pixelLeft == orgnX)

         {

              stepX = 0;

         }

         if(cloneLayer.style.pixelTop == orgnY)

         {

              stepY = 0;

         }

         if(cloneLayer.style.pixelLeft == orgnX && cloneLayer.style.pixelTop == orgnY)

         {

              EndMove();

         }

     }

    

     //to the design

     else

     {

         EndMove();

     }

}

 

//stop and then back to the state ()carton

function EndMove()

{

         sourceLayer.style.pixelLeft = orgnX;

         sourceLayer.style.pixelTop = orgnY;

         cloneLayer.style.pixelLeft = orgnX;

         cloneLayer.style.pixelTop = orgnY;

         cloneLayer.className = "docked";

         clearInterval(back);

}

 

//Main function of this demo

function startDraging(inAim,inSource,inClone,initAimX,initAimY,initOrgnX,initOrgnY)

{

    getLayer(inAim,inSource,inClone)

    initDrag(initAimX,initAimY,initOrgnX,initOrgnY);

    sourceLayer.onmousedown = BeforeDrag;

    document.onmousemove = OnDrag; //if we use cloneLayer,then the content will be draged ,and well a bug

    cloneLayer.onmouseup = EndDrag;   

}

 

//transfer

startDraging("aim","sourceLayer","cloneLayer",600,500,50,50);

//-->

</script>

</body>

</html>
posted on 2007-01-29 14:42 wqwqwqwqwq 阅读(630) 评论(0)  编辑  收藏 所属分类: Simple Java

只有注册用户登录后才能发表评论。


网站导航:
 
<2007年1月>
31123456
78910111213
14151617181920
21222324252627
28293031123
45678910




常用链接

留言簿(10)

随笔分类(95)

随笔档案(97)

文章档案(10)

相册

J2ME技术网站

java技术相关

mess

搜索

  •  

最新评论

阅读排行榜

校园梦网网络电话,中国最优秀的网络电话