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

最新推荐文章于 2011-08-11 14:56:06 发布

转载最新推荐文章于 2011-08-11 14:56:06 发布 · 260 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/tory320/archive/2005/07/27/200849.html

文章标签：

#javascript #ViewUI

该博客为转载内容，转载自https://www.cnblogs.com/tory320/archive/2005/07/27/200849.html ，涉及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>

<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