*purpleendurer修正了原文中的一些错误
你可以通过IE为你的HTML元素添加行为，建立面向对象的页面设计方法。Phillip Perkins建立了一个<DIV>对象，当用户拖动它时，它会在限定的<DIV>内继续定向运行。
Macromedia Flash可以使开发者免受网络浏览器与互操作解决方案的限制。但是，局限于Flash让你无法体验到网络浏览器的许多特色。
例如，你可以通过IE为HTML元素添加行为，建立对象面向的页面设计方法。在这个例子中，我会建立了一个<DIV>对象，当用户拖动它时，它会在限定的<DIV>内继续定向运行。
为HTML添加行为的能力是设计的一个关键部分。在IE中，这通过相关的样式来实现。添加行为的样式特性即“behavior”。你可以通过嵌套的<STYLE>标签来添加行为，就像这样：
<style>DIV.object { behavior: url(Behavior.htc);}
从这段脚本中，你可以发现一个行为会提及到一个HTC（HTML组件）文件。既然我们具有对象化这些HTML元素的基础，我们就能建立控制它们的行为脚本。
表A中包含了为我们的嵌套<DIV>对象建立行为的所有代码。在这一个组件内就有许多的代码。
表 A --文件component.htc的内容
<public:component lightweight="true">
<public:attach event="onmousedown" onevent="element_onmousedown()"/>
<public:attach event="onmousemove" onevent="element_onmousemove()"/>
<public:attach event="onmouseup" onevent="element_onmouseup()"/>
<public:attach event="onmouseout" onevent="element_onmouseup()"/>
<public:attach event="onselectstart" onevent="element_onselectstart()"/>
<public:attach event="ondragstart" onevent="element_ondragstart()"/>
<public:attach event="onload" for="window" onevent="Init()"/>
<public:method name="moveMe"/>
<public:property name="clickPoint" get="get_clickPoint" put="put_clickPoint"/>
<public:property name="interval" get="get_interval" put="put_interval"/>
<script language="JScript">
var m_bStarted = false;
var m_bMoving = false;
var m_clickPoint = null;
var m_tStart = 0;
var m_tEnd = 0;
var m_ptStart = null;
var m_Slope = null;
var m_interval = 0;
var m_isMoving = false;
var m_trash = 0;
var m_dX = 0;
var m_dY = 0;
var m_vectX = 0;
var m_vectY = 0;
var m_pNode = null;
var m_bounds = [];
var BOUNDS = {"left":0,"top":1,"right":2,"bottom":3};
var m_dimensions = [];
var DIMS = {"width":0,"height":1};
function Init()
{
element.id = element.document.uniqueId;
var m_pNode = element.parentNode;
m_bounds = [
0,
0,
parseInt(m_pNode.currentStyle.width),
parseInt(m_pNode.currentStyle.height)
];
m_dimensions = [
Node parseInt(element.offsetWidth),
parseInt(element.offsetHeight)
];
}
function element_onmousedown()
{
m_bStarted = true;
m_tStart = new Date();
clearInterval(m_interval);
m_Slope = null;
m_ptStart = null;
m_trash = 0;
m_dX = 0;
m_dY = 0;
m_vectX = 0;
m_vectY = 0;
m_clickPoint = new Point(event.x, event.y);
m_ptStart = new Point(part(element.currentStyle.left), parseInt(element.currentStyle.top));
}
function element_onmouseup()
{
if (!m_bMoving) return;
m_bMoving = false;
m_bStarted = false;
m_tEnd = new Date();
var t = m_tEnd.valueOf() - m_tStart.valueOf();
var lPoint = new Point(event.x, event.y);
m_Slope = Geometry.slope(m_clickPoint, lPoint);
var ptEnd = m_Slope.add(m_ptStart);
element.style.left = ptEnd.posX + "px";
element.style.top = ptEnd.posY + "px";
var spd = 0;
if (m_Slope.deltaX != 0 && m_Slope.deltaY != 0)
{
spd = Math.sqrt(Math.pow(m_Slope.deltaX, 2) + Math.pow(m_Slope.deltaY,2))/t;
}
else
{
spd = (m_Slope.deltaX + m_Slope.deltaY)/t;
}
if (spd > 1) spd = 1;
m_dX = m_Slope.deltaX;
m_dY = m_Slope.deltaY;
if (m_dX != 0) m_vectX = (m_dX > 0) ? 2 : -2;
if (m_dY != 0) m_vectY = (m_dY > 0) ? 2 : -2;
startMove(element, parseInt(1/spd));
}
function element_onmousemove()
{
m_bMoving = m_bStarted;
if (!m_bMoving) return;
var lPoint = new Point(event.x, event.y);
var lSlope = Geometry.slope(m_clickPoint, lPoint);
var ptEnd = lSlope.add(m_ptStart);
element.style.left = ptEnd.posX + "px";
element.style.top = ptEnd.posY + "px";
}
function element_onselectstart()
{
event.returnValue = false;
return false;
}
function element_ondragstart()
{
event.returnValue = false;
return false;
}
function get_clickPoint()
{
return m_clickPoint;
}
function put_clickPoint(o)
{
if (typeof(o) == "object" && o.constructor == "Point")
{
m_clickPoint = o;
}
else
{
alert("Expected Point.");
}
}
function get_interval()
{
return m_interval;
}
function put_interval(n)
{
m_interval = n;
}
function moveMe()
{
if (m_isMoving) return;
setTimeout("m_isMoving = true;", 1);
var newX = parseInt(element.currentStyle.left);
var newY = parseInt(element.currentStyle.top);
var dXabs = Math.abs(m_dX);
var dYabs = Math.abs(m_dY);
if (dXabs > dYabs)
{
//divide both by deltaX
//each call move X by 1 and Y by Y/X
//if iteration > 1, then move Y by 1
//and add remainder back on Y
newX += m_vectX;
var l_step = (m_dY/m_dX) * 2;
m_trash = m_trash + l_step;
if (m_trash > 2 || m_trash < -2)
{
newY += m_vectY;
m_trash -= m_vectX;
}
}
else
{
//vice-versa
newY += m_vect
