如何使用行为使HTML对象可以移动

分享于 

6分钟阅读

Web开发

  繁體
Screenshot - movable_behavior_IFrame.gif

介绍

以前,我遇到了一个问题: 我不得不让一些简单的HTML组件可以在网页上移动。 这些网页是大型内部网解决方案的一部分,使用微软 IE 6或者更高版本发布到客户运行 Windows 环境。 作为一个行为,实现这个特性是一个直接的可能,因为所有的客户都拥有 IE。 很快,我发现,尽管它是相对容易的,使它可以更加复杂,特别是如果你想重叠一些东西。 我在网上花了几个小时来找一个解决方案。 我可以看到,许多它的他人都有一个类似的问题,但没有人可以接受更多的可以接受的解决方案。 它的中一些人建议使用 DIV 标签重写下拉框,有些人建议在移动对象 上面 时使下拉框不见。 这些建议都不符合我的要求。 所以我得自己解决一个问题。 在我看来我找到了一个。 在文章 below 中描述了。 由你来判断它是否好,但是我使用它,我很高兴。

行为

行为是微软 IE 5.5中引入的一个非常重要的特性。 动态 HTML ( DHTML ) 行为是在页面上封装特定功能或者行为的组件。 当应用到页面上的标准HTML元素时,行为会增强默认元素行为。 元素行为使你可以将自定义元素添加到页中。 你可以在这里找到关于microsoft站点的行为的更一般信息。 微软网站网站为我们提供了一个可以移动行为的例子。

实现行为

我开始使用上面提到的微软行为。 它向我介绍了一些基本功能。 有些很好,有些不对我,所以我几乎从头开始重写它。 在这里,你可以看到使对象可以移动所需的最小行为:

<attach event="onmouseup" handler="DoMouseUp"/>
<attach event="onmousedown" handler="DoMouseDown"/>
<script language="jscript">var iOffsetX; var iOffsetY;function DoMouseDown()
{
 setCapture();
 iOffsetX = window.event.x - element.style.pixelLeft;
 iOffsetY = window.event.y - element.style.pixelTop;
 attachEvent ("onmousemove", DoMouseMove);
} function DoMouseMove()
{
 var iLeft = window.event.x - iOffsetX;
 var iTop = window.event.y - iOffsetY;
 style.left = iLeft;
 style.top = iTop;
}function DoMouseUp()
{
 detachEvent ("onmousemove", DoMouseMove);
 releaseCapture();
}
</script>

这里行为可以由 static HTML代码初始化,如下所示:

<divid="movableDiv"style="position: absolute; 
 width: 100px; height: 100px; background-color: Blue;
 cursor: move; behavior: url(movable.htc); left: 100px; top: 100px;"> Movable DIV</div>

或者通过使用如下所示的JavaScript动态:

document.getElementById("movableDiv").style.behavior = "url(movable.htc)";

让我们看看它是如何工作的。 首先,我们将制作一个简单的网页,如下所示:

movable behavior

如果只移动元素,那么我们就不需要得到所需的行为。

movable behavior

但是通过调整 z-index,我们可以解决这个问题:

movable behavior

现在让我们添加一些 SELECT 对象,看看接下来会发生什么:

movable behavior

我们想要的不是我们想要的。

movable behavior

还有 finally,这是终极解决方案: 我们将底层 IFRAME 对象添加到 DIV 标记中:

<attach event="onmouseup" handler="DoMouseUp"/>
<attach event="onmousedown" handler="DoMouseDown"/>
<attach event="ondocumentready" handler="SetDefaults"/>
<script language="jscript">var iOffsetX; var iOffsetY;var IFrElm;var pDoc = document.parentWindow.document;function SetDefaults()
{
 IFrElm = makeIFrame();
}function DoMouseDown()
{
 if (IFrElm == null)
 IFrElm = makeIFrame();
 setCapture();
 iOffsetX = window.event.x - element.style.pixelLeft;
 iOffsetY = window.event.y - element.style.pixelTop;
 attachEvent ("onmousemove", DoMouseMove);
} function DoMouseMove()
{
 var iLeft = window.event.x - iOffsetX;
 var iTop = window.event.y - iOffsetY;
 style.left = iLeft;
 style.top = iTop;
 IFrElm.style.left = iLeft;
 IFrElm.style.top = iTop;
}function DoMouseUp()
{
 detachEvent ("onmousemove", DoMouseMove);
 releaseCapture();
}function makeIFrame()
{
 var obj = pDoc.createElement('IFrame');
 obj.style.position = 'absolute';
 obj.style.left = offsetLeft;
 obj.style.top = offsetTop;
 obj.style.height = offsetHeight;
 obj.style.width = offsetWidth;
 obj.style.zIndex = style.zIndex - 1;
 return pDoc.body.appendChild(obj);
}
</script>

movable behavior

历史记录

  • 第九个 2007年09月: 代码项目的初始发布

你可以在我的网站的/dhtml 部分找到这篇文章最新的版本。


对象  MAKE  MOV  行为  behaviors  movable  
相关文章