新浪博客

Dreamweaver提供的行为动作 > 拖动层

2007-08-11 14:16阅读:
拖动层
「拖动层」动作使来访者可以拖动一个层。使用该动作创建谜题,滑动控制和其他可移动的界面元素。
您可以指定来访者拖动该层的方向(水平,垂直或者任意方向),拖动该层的目标,如果层与目标的间距在指定象素范围内是否将层靠齐到目标,当层找到目标以后怎么办等等。
由于「拖动层」动作必须在层可以被来访者拖动之前调用,所以一定要确保触发该动作的事件在来访者企图拖动层之前发生。虽然您也可以使用onMouseOver事件将其附加到链接上,但最好的办法是将「拖动层」附加在body对象上(使用onLoad事件)。
若要使用拖动层动作:
1 选择「插入>层」或点击「对象」面板的「层」按钮,并在「文档」窗口的「设计」视图中绘制层。
2 通过点击「文档」窗口底部的标签选择器中的<body>标签选取之。
3 打开「行为」面板。
4 点击(+)按钮并从「动作」弹出式菜单中选择「拖动层」。
如果「拖动层」不可用,可能是因为您选取了一个层。因为层在4.0的浏览器中不接受事件,所以您必须选择另外一个对象——如body标签或链接(a标签)——或者在「选择浏览器」弹出式菜单中将目标浏览器改为IE 4.0。
5 在「层」弹出式菜单中选取您需要使其可拖动的层。
6 从「移动」弹出式菜单中选择「限制」或「不限制」。
「不限制」移动适合于谜题和其他的拖放游戏。对于滑动控制和可移动布景如文件抽屉,幕和小盲区,请选择约束移动。
7 对于约束移动,在「上」,「下」,「左」,「右」输入值(单位:象素)。
该值是相对于层的起始位置的。若要在一个矩形区域内约束移动,在四个域中输入正值。若只允许垂直移动,则在「上」和「下」中输入正值,而在「左」和「右」中输入0。若只允许垂直移动,则在「左」和
「右」中输入正值,而在「上」和「下」中输入0。
8 在「左」和「上」域中输入投放目标的值(单位:象素)。
投放目标就是您需要来访者将层拖动到的位置。当一个层的坐标和您在「左」和「上」域中输入的值相等时便认为该层到达了投放目标。该值相对于浏览器窗口的左上角。点击「取得目前位置」将把层的当前位置自动填充到域中。
9 在「靠齐距离」域中输入一个值(单位:象素)以指定来访者必须将层拖动到离投放目标多远的距离时,层才能自动靠齐到目标。
更大的值将使得来访者寻找投放目标更为容易。
10 对于简单的谜题和布景操作,到这里就行了。若要为层定义拖动控制区,在其拖动时跟踪层的运动,当层被放下时触发动作,请点击「高级」选项卡。
11 若要指定来访者必须点击层的某个特殊区域才能拖动层,从「拖动控制点」弹出式菜单中选择「层内区域」,然后输入左边和顶部的坐标以及拖动控制区的宽度和高度。
当层内有一些关于拖动信息的元素,如标题栏或抽屉手柄等,该选项就很有用了。如果您需要来访者可以点击层的任何区域并拖动它时,不要选取该选项。
12 选择任何您想使用的「拖动时」选项:
如果在层拖动时需要将其移动到堆叠顺序的顶部时,选取「将层移至最前」选项。如果您选择该选项,使用弹出式菜单选择拖动结束后是否将层还原到在堆叠顺序中的原始位置还是将其继续留在最前。
在「呼叫JavaScript」域中输入JavaScript代码或者函数名称(例如,monitorLayer())以在层拖动时重复执行该代码或函数。例如,您可以写一个函数来监测层的坐标,并且在文本域中显示一些提示信息,如“您现在离目标已经很近了”之类。请参看收集关于可拖动层的信息。
13 在第二个「呼叫JavaScript」域中输入JavaScript代码或者函数名称(例如,evaluateLayerPos())以在层放下时执行代码或函数。选取「只有在靠齐时」选项将会使得只有层在到达投放目标时,才会执行JavaScript代码。
14 点击「确定」。
15 检查默认事件是否是您需要的事件。
如果该事件不是您所需的,请从弹出式菜单中选择另一个事件。如果您需要的事件没有列出,请在「选择浏览器」弹出式菜单中改变目标浏览器。记住层是不被3.0版本浏览器支持的。


注意: 您不能将「拖动层」动作附加给使用onMouseDown或onClick事件的对象。

我的更多文章

下载客户端阅读体验更佳

APP专享