jQuery Ui Draggable在移动端浏览器不起作用解决方案

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">今天写一个东西发现的一个问题，在pc端的网页上用jQuery Ui的draggable可以实现拖拽，但是当用移动端的浏览器时却不起作用，应该是由于事件的处理方式产生了问题，所以得自己去处理事件。</span>

于是乎在stackoverflow上面找到了遇到相同问题的人，地址：http://stackoverflow.com/questions/17221570/draggable-interaction-not-working-on-cellphone/26862611#26862611

代码为：

// This is a fix for mobile devices

/iPad|iPhone|Android/.test( navigator.userAgent ) && (function( $ ) {

var proto =  $.ui.mouse.prototype,
_mouseInit = proto._mouseInit;

$.extend( proto, {
    _mouseInit: function() {
        this.element
        .bind( "touchstart." + this.widgetName, $.proxy( this, "_touchStart" ) );
        _mouseInit.apply( this, arguments );
    },

    _touchStart: function( event ) {
         this.element
        .bind( "touchmove." + this.widgetName, $.proxy( this, "_touchMove" ) )
        .bind( "touchend." + this.widgetName, $.proxy( this, "_touchEnd" ) );

        this._modifyEvent( event );

        $( document ).trigger($.Event("mouseup")); //reset mouseHandled flag in ui.mouse
        this._mouseDown( event );

        //return false;           
    },

    _touchMove: function( event ) {
        this._modifyEvent( event );
        this._mouseMove( event );   
    },

    _touchEnd: function( event ) {
        this.element
        .unbind( "touchmove." + this.widgetName )
        .unbind( "touchend." + this.widgetName );
        this._mouseUp( event ); 
    },

    _modifyEvent: function( event ) {
        event.which = 1;
        var target = event.originalEvent.targetTouches[0];
        event.pageX = target.clientX;
        event.pageY = target.clientY;
    }

});

})( jQuery );

上面的代码解决了开启draggable的dom元素不能drag的问题，但是我做的东西里面还需要该dom元素可以点击，所以得对上面的代码进行修改，对点击事件进行处理。本人iOS开发菜鸟一只，对javascript不是很了解，但是大体思路还是有的，我的解决办法就是添加一个moveFlag，然后在_touchMove方法中翻转该变量，然后在_touchEnd中归位flag。最后只要判断flag有没有变就可以知道是点击还是move了。还有一个问题需要处理的就是当flag没有翻转时，也就是点击事件发生时得去主动触发点击事件，需要主动dispatch 一个click evnet，代码为：

        // 主动触发点击事件
        if (moveFlag == 0) {
        var evt = document.createEvent('Event'); 
evt.initEvent('click',true,true); 
element.dispatchEvent(evt);
        };

如果这样的话会发现element没有定义，所以需要自己去找一个element来分发这个点击事件，此时我将this输出，看看当前点击的对象结构，

可以看到一个handleElement里面有我定义的一个class .btn-q-1它是一个span而不是一个button，这样也可以避免一些不必要的事件处理，方便很多。于是乎我们通过this.handleElement[0]来获取当前点击的按钮，然后通过该按钮触发点击。这样就解决了点击和移动的问题

最终代码：

var moveFlag = 0; // 是否移动的flag

/iPad|iPhone|Android/.test( navigator.userAgent ) && (function( $ ) {
var proto =  $.ui.mouse.prototype,
_mouseInit = proto._mouseInit;
$.extend( proto, {
    _mouseInit: function() {
        this.element
        .bind( "touchstart." + this.widgetName, $.proxy( this, "_touchStart" ) );
        _mouseInit.apply( this, arguments );
    },
    _touchStart: function( event ) {
         this.element
        .bind( "touchmove." + this.widgetName, $.proxy( this, "_touchMove" ) )
        .bind( "touchend." + this.widgetName, $.proxy( this, "_touchEnd" ) );

        this._modifyEvent( event );

        $( document ).trigger($.Event("mouseup")); //reset mouseHandled flag in ui.mouse
        this._mouseDown( event );
        console.log(this);
        //return false;           
    },
    _touchMove: function( event ) {
    moveFlag = 1;
        this._modifyEvent( event );
        this._mouseMove( event );   

    },
    _touchEnd: function( event ) {
        // 主动触发点击事件
        if (moveFlag == 0) {
        var evt = document.createEvent('Event'); 
evt.initEvent('click',true,true); 
this.handleElement[0].dispatchEvent(evt);
        };

        this.element
        .unbind( "touchmove." + this.widgetName )
        .unbind( "touchend." + this.widgetName );
        this._mouseUp( event ); 

    moveFlag = 0;
    },
    _modifyEvent: function( event ) {
        event.which = 1;
        var target = event.originalEvent.targetTouches[0];
        event.pageX = target.clientX;
        event.pageY = target.clientY;
    }
});
})( jQuery );

有心得的朋友可以留下一些自己的解决思路供然后分享，谢谢

更多相关文章

随机推荐