MooTools自定义拖动事件

Question

无论如何使用mousedown，mouseup和mousemove事件在MooTools中定义拖动事件。我希望能够做到以下几点：

$('#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事件侦听器。

由于鼠标可能会离开盒子（鼠标不会被清除），因此也会添加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