在ASP.NET中如何实现拖拽和停靠？

< script language = " javascript " >
var  m_iRectSize  =   6 ;         // 框框大小
var  m_oRect  =   new  Array();     // 框框数组
var  m_oActiveRect  =   null ;     // 激活的框框
var  m_iOffsetRectX  =   0 ;         // 框框x偏移
var  m_iOffsetRectY  =   0 ;         // 框框y偏移

var  m_oActiveObj  =   null ;     // 激活的对象
var  m_bMove  =   false ;         // 是否处于移动状态

var  m_iOffsetX  =   0 ;             // x偏移
var  m_iOffsetY  =   0 ;             // y偏移

function  obj_MouseDown(t_oObj)
{
    m_oActiveObj  =  t_oObj;
    m_bMove  =   true ;

     // -------记录偏移---------
    m_iOffsetX  =  event.x  -  parseInt(m_oActiveObj.style.left);
    m_iOffsetY  =  event.y  -  parseInt(m_oActiveObj.style.top);
     // ------------------------
}

function  obj_MouseMove()
{
     if  (m_oActiveObj  ==   null )
         return ;
    
     if  ( ! m_bMove)
         return ;
    
    m_oActiveObj.style.left  =  event.x  -  m_iOffsetX;
    m_oActiveObj.style.top  =  event.y  -  m_iOffsetY;

    RectMove();
}

function  obj_MouseUp()
{
    m_bMove  =   false ;
}

function  PageInit()
{
    m_oRect.push(document.all[ " rect1 " ]);
    m_oRect.push(document.all[ " rect2 " ]);
    m_oRect.push(document.all[ " rect3 " ]);
    m_oRect.push(document.all[ " rect4 " ]);
    m_oRect.push(document.all[ " rect5 " ]);
    m_oRect.push(document.all[ " rect6 " ]);
    m_oRect.push(document.all[ " rect7 " ]);
    m_oRect.push(document.all[ " rect8 " ]);
}

function  RectMove()
{
     // -------框框处理--------
     if  (m_oRect[ 0 ]  !=  m_oActiveRect)
    {
        m_oRect[ 0 ].style.top  =  parseInt(m_oActiveObj.style.top)  -  m_iRectSize / 2 ;
        m_oRect[ 0 ].style.left  =  parseInt(m_oActiveObj.style.left)  -  m_iRectSize / 2 ;
    }

     if  (m_oRect[ 1 ]  !=  m_oActiveRect)
    {
        m_oRect[ 1 ].style.top  =  parseInt(m_oActiveObj.style.top)  -  m_iRectSize / 2 ;
        m_oRect[ 1 ].style.left  =  parseInt(m_oActiveObj.style.left)  -  m_iRectSize / 2   +  

parseInt(m_oActiveObj.style.width) / 2 ;
    }

     if  (m_oRect[ 2 ]  !=  m_oActiveRect)
    {
        m_oRect[ 2 ].style.top  =  parseInt(m_oActiveObj.style.top)  -  m_iRectSize / 2 ;
        m_oRect[ 2 ].style.left  =  parseInt(m_oActiveObj.style.left)  -  m_iRectSize / 2   +  

parseInt(m_oActiveObj.style.width);
    }

     if  (m_oRect[ 3 ]  !=  m_oActiveRect)
    {
        m_oRect[ 3 ].style.top  =  parseInt(m_oActiveObj.style.top)  -  m_iRectSize / 2   +  

parseInt(m_oActiveObj.style.height) / 2 ;
        m_oRect[ 3 ].style.left  =  parseInt(m_oActiveObj.style.left)  -  m_iRectSize / 2 ;
    }

     if  (m_oRect[ 4 ]  !=  m_oActiveRect)
    {
        m_oRect[ 4 ].style.top  =  parseInt(m_oActiveObj.style.top)  -  m_iRectSize / 2   +  

parseInt(m_oActiveObj.style.height) / 2 ;
        m_oRect[ 4 ].style.left  =  parseInt(m_oActiveObj.style.left)  -  m_iRectSize / 2   +  

parseInt(m_oActiveObj.style.width);
    }

     if  (m_oRect[ 5 ]  !=  m_oActiveRect)
    {
        m_oRect[ 5 ].style.top  =  parseInt(m_oActiveObj.style.top)  -  m_iRectSize / 2   +  

parseInt(m_oActiveObj.style.height);
        m_oRect[ 5 ].style.left  =  parseInt(m_oActiveObj.style.left)  -  m_iRectSize / 2 ;
    }

     if  (m_oRect[ 6 ]  !=  m_oActiveRect)
    {
        m_oRect[ 6 ].style.top  =  parseInt(m_oActiveObj.style.top)  -  m_iRectSize / 2   +  

parseInt(m_oActiveObj.style.height);
        m_oRect[ 6 ].style.left  =  parseInt(m_oActiveObj.style.left)  -  m_iRectSize / 2   +  

parseInt(m_oActiveObj.style.width) / 2 ;
    }

     if  (m_oRect[ 7 ]  !=  m_oActiveRect)
    {
        m_oRect[ 7 ].style.top  =  parseInt(m_oActiveObj.style.top)  -  m_iRectSize / 2   +  

parseInt(m_oActiveObj.style.height);
        m_oRect[ 7 ].style.left  =  parseInt(m_oActiveObj.style.left)  -  m_iRectSize / 2   +  

parseInt(m_oActiveObj.style.width);
    }
     // -----------------------
}

function  rect_MouseDown(t_oObj)
{
     if  (m_oActiveRect  ==   null )
    {
        m_oActiveRect  =  t_oObj;
    }

     // -------记录偏移---------
    m_iOffsetRectX  =  event.x  -  parseInt(m_oActiveRect.style.left);
    m_iOffsetRectY  =  event.y  -  parseInt(m_oActiveRect.style.top);
     // ------------------------
}

function  rect_MouseMove()
{
     if  (m_oActiveRect  ==   null )
         return ;

    m_oActiveObj.style.width  =  parseInt(m_oActiveObj.style.width)  +  event.x  -  

m_iOffsetRectX  -  parseInt(m_oActiveRect.style.left);
    m_oActiveObj.style.height  =  parseInt(m_oActiveObj.style.height)  +  event.y  -  

m_iOffsetRectY  -  parseInt(m_oActiveRect.style.top);

    m_oActiveRect.style.left  =  event.x  -  m_iOffsetRectX;
    m_oActiveRect.style.top  =  event.y  -  m_iOffsetRectY;

    RectMove();
}

function  rect_MouseUp()
{
    m_oActiveRect  =   null ;
}
</ script >

< body onload = " PageInit(); " >
</ body >
< input type = " text "  id = " txb1 "  

style = " position:absolute;top:0px;left:0px;width:100px;height:30px;cursor:default "  

onmousedown = " obj_MouseDown(this); "  onmousemove = " obj_MouseMove(); "  onmouseup = " obj_MouseUp(); "  

readonly >
< img id = " rect1 "  style = " position:absolute;top:0px;left:0px;width:6px;height:6px;border:1px solid 

black; " >
< img id = " rect2 "  style = " position:absolute;top:0px;left:0px;width:6px;height:6px;border:1px solid 

black; " >
< img id = " rect3 "  style = " position:absolute;top:0px;left:0px;width:6px;height:6px;border:1px solid 

black; " >
< img id = " rect4 "  style = " position:absolute;top:0px;left:0px;width:6px;height:6px;border:1px solid 

black; " >
< img id = " rect5 "  style = " position:absolute;top:0px;left:0px;width:6px;height:6px;border:1px solid 

black; " >
< img id = " rect6 "  style = " position:absolute;top:0px;left:0px;width:6px;height:6px;border:1px solid 

black; " >
< img id = " rect7 "  style = " position:absolute;top:0px;left:0px;width:6px;height:6px;border:1px solid 

black;cursor:s-resize; " >
< img id = " rect8 "  style = " position:absolute;top:0px;left:0px;width:6px;height:6px;border:1px solid 

black;cursor:nw-resize "  onmousedown = " rect_MouseDown(this); "  onmousemove = " rect_MouseMove(); "  

onmouseup = " rect_MouseUp(); " >

转载于:https://www.cnblogs.com/tory320/archive/2005/07/27/200849.html