jQuery拖放在触摸设备(iPad,Android)

前端之家收集整理的这篇文章主要介绍了jQuery拖放在触摸设备(iPad,Android)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我们有一个卡片游戏网站,广泛使用jQuery Draggable& Droppable,而且几乎完美地工作(当使用鼠标)近一年。

我们真的希望有网站工作在触摸屏设备,但我们似乎不能得到jQuery的拖动,特别是drop功能可靠地工作。

拖动工作“确定”,除非被拖动的div在具有任何偏移,边距,填充等的另一个dom元素内。如果是,拖动的元素也从用户的手指偏移相似的量。可能听起来不是很大,但它使接口不可用。

滴滴似乎不工作。

我们研究了这里提出的各种选项(如果可以的话,将尝试更新这个帖子与其中一些的链接),但没有为我们工作。

我们也研究了jQuery Mobile,但是这仍然是alpha,甚至这似乎更多的一个框架,使网站模拟手机的UI vs我们正在寻找。

大多数关于这个话题的SO和谷歌帖子似乎在2010年末落后,这让我认为有一个明显的答案,也许我们只是失踪。

BTW,我们正在寻找的功能显然在技术上是可能的,因为YUI库拖放工作按预期。不幸的是,我们不能证明重构站点从jQuery切换到YUI。

任何人有什么想法?我们会解决一个只支持iPad的答案,但它真的需要不要求我们重构现有的网站。

谢谢!

解决方法

将其粘贴到.js文件的开头:
(function ($) {
    // Detect touch support
    $.support.touch = 'ontouchend' in document;
    // Ignore browsers without touch support
    if (!$.support.touch) {
    return;
    }
    var mouseProto = $.ui.mouse.prototype,_mouseInit = mouseProto._mouseInit,touchHandled;

    function simulateMouseEvent (event,simulatedType) { //use this function to simulate mouse event
    // Ignore multi-touch events
        if (event.originalEvent.touches.length > 1) {
        return;
        }
    event.preventDefault(); //use this to prevent scrolling during ui use

    var touch = event.originalEvent.changedTouches[0],simulatedEvent = document.createEvent('MouseEvents');
    // Initialize the simulated mouse event using the touch event's coordinates
    simulatedEvent.initMouseEvent(
        simulatedType,// type
        true,// bubbles                    
        true,// cancelable                 
        window,// view                       
        1,// detail                     
        touch.screenX,// screenX                    
        touch.screenY,// screenY                    
        touch.clientX,// clientX                    
        touch.clientY,// clientY                    
        false,// ctrlKey                    
        false,// altKey                     
        false,// shiftKey                   
        false,// MetaKey                    
        0,// button                     
        null              // relatedTarget              
        );

    // Dispatch the simulated event to the target element
    event.target.dispatchEvent(simulatedEvent);
    }
    mouseProto._touchStart = function (event) {
    var self = this;
    // Ignore the event if another widget is already being handled
    if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0])) {
        return;
        }
    // Set the flag to prevent other widgets from inheriting the touch event
    touchHandled = true;
    // Track movement to determine if interaction was a click
    self._touchMoved = false;
    // Simulate the mouSEOver event
    simulateMouseEvent(event,'mouSEOver');
    // Simulate the mousemove event
    simulateMouseEvent(event,'mousemove');
    // Simulate the mousedown event
    simulateMouseEvent(event,'mousedown');
    };

    mouseProto._touchMove = function (event) {
    // Ignore event if not handled
    if (!touchHandled) {
        return;
        }
    // Interaction was not a click
    this._touchMoved = true;
    // Simulate the mousemove event
    simulateMouseEvent(event,'mousemove');
    };
    mouseProto._touchEnd = function (event) {
    // Ignore event if not handled
    if (!touchHandled) {
        return;
    }
    // Simulate the mouseup event
    simulateMouseEvent(event,'mouseup');
    // Simulate the mouSEOut event
    simulateMouseEvent(event,'mouSEOut');
    // If the touch interaction did not move,it should trigger a click
    if (!this._touchMoved) {
      // Simulate the click event
      simulateMouseEvent(event,'click');
    }
    // Unset the flag to allow other widgets to inherit the touch event
    touchHandled = false;
    };
    mouseProto._mouseInit = function () {
    var self = this;
    // Delegate the touch handlers to the widget's element
    self.element
        .on('touchstart',$.proxy(self,'_touchStart'))
        .on('touchmove','_touchMove'))
        .on('touchend','_touchEnd'));

    // Call the original $.ui.mouse init method
    _mouseInit.call(self);
    };
})(jQuery);

在早上打电话给我;)(这真的傲慢,我没有写这个解决方案,虽然我希望我有,如果我记得我在哪里找到它,我会引用,如果有人知道这个代码来自哪里,请评论和信用该人)

更新:你去:This is where I found this

原文链接:https://www.f2er.com/jquery/183873.html

猜你在找的jQuery相关文章