在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();">