Drag Layer (拖拽层)

Drag Layer action 允许用户拖拽层。使用这个 action 可以创建拼图,滑标控制器,和其它可移动的界面元素。

可以指定用户拖拽层的方向(水平,垂直或者任意方向等),目标,如果拖拽层在目标一定的像素数目范围内,是否与目标对齐,在拖拽层到大目标时如何处理,等等。

由于 Drag Layer action 必须在拖拽层之前调用,所以你要确保触发 action 的时间要在用户拖拽层之前发生。所以最好给 BODY 对象添加一个 Drag Layer (使用 onLoad 事件),虽然你还要使用 onMouseOver 事件给层的链接添加 Drag Layer action。

如何使用 Drag Layer action:

1 选择 Insert > Layer,或者点击对象面板上的 Layer 按钮,然后在文档窗画出一个层来。
2 取消对层的选取。
3 打开 Behavior 面板。
4 点击加号 (+) 按钮,从 Actions 弹出菜单中选择 Drag Layer。
如果 Drag Layer 不能用,一定是还有层被选中。因为在选取了所有 4.0 的浏览器后层是不接受事件的,所以你必须选取一个不同的对象 — 如 BODY 标签或者链接 (A 标签) — 或者在 Events For 弹出菜单中将目标浏览器改为 IE 4.0。
5 在 Layer 弹出菜单中,选取要拖动的层。
6 从 Movement 弹出菜单中选取 Constrained 或 Unconstrained。
Unconstrained(无约束)移动,对于一些拼图及其它的一些拖放类游戏是非常合适的。对于滑标控制器及其它一些项目,选择有约束的移动比较好。
7 对于强制性的移动,要在 Up,Down,Left,和 Right 填框内输入数值(单位是像素)。
你所设定的数值是相对于层开始位置的。如果是要强制在一个矩形区域内移动,那么四个填框内都要输入一个绝对值。如果只是要垂直移动,那么只要在 Up 和Down 填框内输入绝对值,Left 和 Right 填框内填上 0 就可以了。如果是要水平方向移动,那么就在 Left 和 Right 填框内输入绝对值,在 Up 和 Down 填框内输入 0 就可以了。
8 在 Left 和 Top 填框内输入拖动后放置位置,单位是像素。
所谓拖放目标 (drop target) 就是你希望用户将层拖放到的位置。被拖动层就会放置到你所规定的位置。这个设定值是相对于浏览器窗口左上角的位置。点击 Get Current Position 会自动在填框内填上层当前位置的坐标值。
9 在 Snap if Within 填框内输入一个数值,单位是像素,这是用来确定用户拖动层与目标位置接近到什么程度时层就可以自动停在目标位置了。
Larger 本身的数值可以很容易地帮助用户确定拖放目标。
10 对于简单的拼图和景色处理来讲,到这里就可以结束了。如果要定义层的拖拽柄,在层被拖动的时候跟踪层的移动,在层被放下的时候触发一个 action,点击 Advanced 标签。
11 如果你要指定只有当用户点击特定区域后才能拖动层,从 Drag Handle 弹出菜单中选择 Area Within Layer,输入左边和顶部坐标,以及拖放柄的宽度和高度。
这个选项对于层内图像有一个暗示拖动的元素的时候时特别的有用,如标题栏或者拖拽柄。如果你想在用户点击拖拽层内任意位置就可以拖动层的话,不要设置这个选项。
12 选择任何你想利用的 While Dragging 选项:
如果层在拖动后必须放在叠放顺序的最上边的话,就选取 Bring Layer to Front。如果选择了这个选项,就要使用弹出菜单选择是否就让被拖动层停留在最上边,还是恢复其原来的叠放位置。
你可以在 Call JavaScript 填框中输入一段 JavaScript 代码,或者一个函数的名字(如 monitorLayer()),在拖动层的时候重复执行。例如,你可以书写一个函数,对层坐标进行监视,并在一个文本框内显示 "you're getting warmer" 或者 "you're nowhere near the drop target" 等提示。参阅 收集可拖动层的信息
13 在第二个 Call JavaScript 填框内输入一段 JavaScript 代码,或者一个函数名字(如 evaluateLayerPos()),在拖动层被放下后执行。如果折断代码是在拖动层一到达拖放目标就执行的话,选取 Only if Snapped。
14 点击 OK。
15 检查默认的事件是否你所需要的。
如果不是,就从弹出菜单中另选一个。如果你需要的事件没有列出,就要在 Events For 弹出菜单中更换目标浏览器了。记住 3.0 的浏览器是不支持层的。

注意: 对于带有 onMouseDown or onClick 事件的对象,是不能添加 Drag Layer action。


 
收集可拖动层的信息

当给对象添加 Drag Layer action 的时候,Dreamweaver 会自动在文档的 HEAD 部分插入 MM_dragLayer() 函数的。除了用于记录可拖动层以外,这个函数还为每个可拖动层顶以三个属性 — MM_LEFTRIGHT MM_UPDOWN,和 MM_SNAPPED — 这些你都可以用在自己的 JavaScript 函数中来确定拖动层的当前水平位置,垂直位置,以及拖动层是否到达了拖放目标。

例如,下边的函数显示了位于名为 curPosField 的表单域内的 MM_UPDOWN (拖动层当前垂直位置)属性值。(表单域对于显示连续性更新信息时非常有用的,因为它是动态的 — 也就是说,你可以在页面上传之后改变其内容 — 对 Netscape Navigator 和 Microsoft Internet Explorer 都有用)。

function getPos(layername){
  var layerRef = MM_findObj(layername); 
  var curVertPos = layerRef.MM_UPDOWN;
  document.tracking.curPosField.value = curVertPos;
}

也可以不显示 MM_UPDOWNMM_LEFTRIGHT,你可以书写一个函数,根据拖动层与拖放目标区域接近的程度显示不同的信息,你也可以根据数值来调用另一个函数显示或隐藏层。对于 MM_UPDOWNMM_LEFTRIGHT 属性值做出什么样的反应只受到你的想象力和你编写 JavaScript 的能力。

如果你的页面上有几个拖动层的时候,读取 MM_SNAPPED 属性是尤其有用的,所有这些层都必须在到达拖放目标后,用户才可以进到下一个页面或者执行下一个任务。例如,你可以写一个函数,来统计有多少个层的 MM_SNAPPED 属性值是 true,然后只要这个层一被放下就立即调用。当统计数字达到要求后,你就可以将用户送到下一个页面或者显示一段恭贺的信息。

如果你在几个层内都使用了 onMouseOver 时间来给链接添加 Drag Layer action,你就必须对 MM_dragLayer() 函数做出一些修改,以防止那些 MM_SNAPPED 属性值已经为 true 的层在鼠标滑过的时候被重置为 false。(这种现象会发生在你使用 Drag Layer 创建图片拼图的时候,因为用户可能会在安排其他层的时候鼠标滑过已经放置好的层。)MM_dragLayer() 不会防止这个 behavior 的,因为有时候还是需要它的 — 例如,如果你要为某单一层设置多个拖放目标。

如何防止对已经放置好的层重新定位:

1 选择 Edit > Find。
2 从 Find What 弹出菜单中选择 HTML Source。
3 在相邻的文本框中输入 (!curDrag)
4 点击 Find Next。
如果 Dreamweaver 询问你是否要从文档的开头继续搜索,点击 Yes。Dreamweaver 会寻找一条声明来读取:
if (!curDrag) return false;
5 关闭 Find 对话框,在 HTML 面板对声明进行修改:
if (!curDrag || curDrag.MM_SNAPPED != null) return false;
两条竖线 (||) 意思是 "or",curDrag 是一个变量,它表示该层已经被登记为可拖动的。在英语中,这条声明的意思是 "如果 curDrag 不是一个对象,或者如果它已经有了 MM_SNAPPED 属性值,就不要再执行其余的函数了。"