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

来源：互联网发布：java 声明base64 编辑：程序博客网时间：2024/05/17 02:56

<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 );

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

1 0