用 JavaScript 创建模块化的交互用户界面

核心提示： 最后，done 方法（参见清单 7）删除这个透明矩形，用 JavaScript 创建模块化的交互用户界面(6)，因为拖放过程现在已经结束， 清单 7. rectangle_drag_handler 的 done 方法this.move = function( x, y ) {this.do

最后，done 方法（参见清单 7）删除这个透明矩形，因为拖放过程现在已经结束。

清单 7. rectangle_drag_handler 的 done 方法

this.move = function( x, y ) {
　　this.done = function() {
　　　this.cover.parentNode.removeChild( this.cover );
　　};
}

组合拖动处理程序

现在必须找到一种方法来同时使用这两个拖动处理程序。这可以通过 compose_drag_handlers() 函数轻松实现，该函数接受这两个拖动处理程序并将其结合成一个综合的拖动处理程序。这个综合拖动处理程序的使用与一般的拖动处理程序一样。这样，这两个原始的拖动处理程序的行为就实现了无缝结合。

compose_drag_handlers() 函数很容易编写。它看上去很像是一个拖动处理程序，但每个方法都会调用这两个原始拖动处理程序中相应的方法。这个函数如清单 8 所示。

清单 8. compose_drag_handlers()

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 所示。