用 JavaScript 创建模块化的交互用户界面（3）
|
- UID
- 1066743
|
用 JavaScript 创建模块化的交互用户界面（3）
组合拖动处理程序现在必须找到一种方法来同时使用这两个拖动处理程序。这可以通过 compose_drag_handlers() 函数轻松实现，该函数接受这两个拖动处理程序并将其结合成一个综合的拖动处理程序。这个综合拖动处理程序的使用与一般的拖动处理程序一样。这样，这两个原始的拖动处理程序的行为就实现了无缝结合。
compose_drag_handlers() 函数很容易编写。它看上去很像是一个拖动处理程序，但每个方法都会调用这两个原始拖动处理程序中相应的方法。这个函数如清单 8 所示。
清单 8. compose_drag_handlers()1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| function compose_drag_handlers( a, b )
{
return {
start:
function( x, y ) {
a.start( x, y );
b.start( x, y );
},
move:
function( x, y ) {
a.move( x, y );
b.move( x, y );
},
done:
function() {
a.done();
b.done();
},
}
}
|
正如您所见，拖动处理程序 a 和 b 被组合到一个综合的拖动处理程序内。如果要调用这个综合处理程序的 start() 方法，实际上就是先后调用 a.start() 和 b.start()。
您需要在名为 prepare_swappable() 的设置函数内调用 compose_drag_handlers，如清单 9 所示。
清单 9. prepare_swappable() 函数1
2
3
4
5
6
7
8
| function prepare_swappable( o )
{
swappables.push( o );
var sdp = new rectangle_drag_handler( o );
var hdp = new highlighting_drag_handler( o );
var both = compose_drag_handlers( sdp, hdp );
install_drag_handler( o, both );
}
|
除了其他功能之外，此函数最主要的功能是为可切换元素创建 rectangle_drag_handler 和 highlighting_drag_handler，然后再将它们组合成一个综合的拖动处理程序。最后，这个综合拖动处理程序再通过调用 install_drag_handler() 来激活，这将在接下来的两个小节中详细介绍。
安全安装鼠标处理程序与常规的事件处理程序不同，一个拖动处理程序可以处理多个事件。尽管如此，它还是需要附加到对象，这与常规的事件处理程序相同。
安装任何一种事件处理程序都是需要技巧的，因为正在修改的元素很可能已经在其内安装了事件处理程序。如果要替换这些事件处理程序，就需要更改页面的行为方式。
为了避免这一问题，可以使用一个名为 install_mouse_handlers() 的实用函数，如清单 10 所示。
清单 10. install_mouse_handlers() 函数1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| function install_mouse_handlers( target, onmouseup, onmousedown, onmousemove )
{
var original_handlers = {
onmouseup: target.onmouseup,
onmousedown: target.onmousedown,
onmousemove: target.onmousemove
};
target.onmouseup = onmouseup;
target.onmousedown = onmousedown;
target.onmousemove = onmousemove;
return {
restore: function() {
target.onmouseup = original_handlers.onmouseup;
target.onmousedown = original_handlers.onmousedown;
target.onmousemove = original_handlers.onmousemove;
}
};
}
|
install_mouse_handlers() 函数负责向特定的对象添加特定的鼠标处理程序。它返回的是一个对象，可使用该对象恢复原始的处理程序。这样一来，当拖放过程结束后，就可以调用 restore() 函数，恢复到拖放过程开始之前的状态。 |
|
|
|
|
|
