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

核心提示： 这个拖动处理程序是一个对象，具有三个方法：start、move 和 done，用 JavaScript 创建模块化的交互用户界面(5)，当初始化一个拖放动作时，调用 start 方法并传递给这次单击的对应坐标，它会更新所拖动的对象使其跟随光标的移动， move 方法更新这个 dragger

这个拖动处理程序是一个对象，具有三个方法：start、move 和 done。当初始化一个拖放动作时，调用 start 方法并传递给这次单击的对应坐标。当四处移动光标时，会反复调用 move 方法，然后同样被传递给光标当前对应的坐标。最后，当鼠标按钮释放后，就会调用 done 方法。

可切换系统同时使用了两个不同的拖动处理程序，这也让您能够干净地处理交互的两个不同方面，即便这两个方面具有复杂的关系。让其中的一个交互成为另一个交互的一部分并不合适。相反，应该能同时无缝地使用这两个交互。

rectangle_drag_handler

这两个拖放处理程序的其中是 rectangle_drag_handler。此处理程序负责移动代表被拖动元素的透明矩形。清单 5 给出了这个 start 方法。

清单 5. rectangle_drag_handler 处理程序

function rectangle_drag_handler( target )
　{
　　this.start = function( x, y ) {
　　　this.cover = coveringDiv( target );
　　　make_translucent( this.cover, .6 );
　　　this.cover.style.backgroundColor = "#777";
　　　dea( this.cover );
　　　this.dragger = new dragger( this.cover, x, y );
　　};
　　// ...
　}

start 方法创建这个透明矩形并将其传递给另一个称为 dragger 的对象。一个 dragger 就是一个对象，它能对应移动的光标移动 DOM 元素。可以将当前的光标的坐标传递给这个 dragger，它会更新所拖动的对象使其跟随光标的移动。

move 方法更新这个 dragger，如清单 6 所示。

清单 6. 更新 dragger

this.move = function( x, y ) {
　　this.dragger.update( x, y );
　};