javascript - 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.输入 );

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