MooTools 自定义拖动事件

Question

无论如何在 MooTools 中使用 mousedown、mouseup 和 mousemove 事件定义拖动事件。我希望能够执行以下操作：

$('#knob').addEvent('drag', function (e) {
    // Drag event code goes here...
});

Answer 1

Dragging

尽管 Mootools 已经实现了 drag, drop, slide and similar effects 所需的一切，但编写自己的事件是了解事件如何工作的好方法。以下是如何使用Element.Events Object 添加其他自定义事件的示例。

效果从注册 mousemove 事件的 mousedown 事件开始。当拖动结束时触发 mouseup 事件，删除 mousemove 事件侦听器。

由于可能会发生鼠标离开框（不会触发 mouseup 进行清理），因此也添加了 mouseout 事件。

在效果的每一步，都会启动drag事件处理程序，并将原始事件对象作为参数传递，您可以通过console.log( e.type );查看原始事件的类型

window.addEvent( 'domready', function() {;

    Element.Events.drag = {

        // the function that will get fired when the custom event is added
        onAdd: function() {

            this.addEvents({
                mousedown: function(e) {
                    this.store( 'x', e.page.x - this.getPosition().x );
                    this.store( 'y', e.page.y - this.getPosition().y );

                    this.addEvents({ 
                        mousemove: function(e) {            
                            this.setPosition({
                                x: e.page.x - this.retrieve( 'x' ), 
                                y: e.page.y - this.retrieve( 'y' )
                            });

                            this.fireEvent( 'drag', e );
                        },
                        mouseout: function(e) {
                            this.fireEvent( 'mouseup', e );
                        }
                    });
                },
                mouseup: function(e) {
                    this.removeEvents( 'mousemove' );
                    this.removeEvents( 'mouseout' );
                    this.fireEvent( 'drag', e );
                }

            });
        },

        // the function that will get fired when the custom event is removed
        onRemove: function() {
            this.removeEvents( 'mousedown' );
            this.removeEvents( 'mouseup' );             
        }
    };

    $('draggable').addEvent( 'drag', function( e ) {
        console.log( e.type );
    });


    // $('draggable').removeEvents( 'drag' );

});

一些关于 Mootools 事件的好文章：

• mootools.net

• ryanflorence.com