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

Question

我们有一个卡片游戏网站,它广泛使用jQuery Draggable和Droppable,它使用了近一年(当使用鼠标时)几乎完美无缺.

我们真的很想让网站在触摸屏设备上运行,但我们似乎无法获得jQuery的拖拽,尤其是降低功能以便可靠地工作.

拖动工程"确定",除非被拖动的DIV是任何种类的偏移量,保证金,填充等的另一个DOM元素中.如果是,则拖动的元素也从用户的手指通过类似的偏移量.可能听起来不是什么大不了的事,但它使界面变得不可用.

掉线似乎不起作用.

我们已经研究了SO上提供的各种选项(如果可以的话,会尝试更新这篇文章的链接,但是没有一个适用于我们).

我们还研究过jQuery Mobile,但它仍处于alpha状态,甚至更像是一个框架,使网站模拟手机的UI与我们正在寻找的.

关于这一主题的大多数SO和谷歌帖子似乎都在2010年末落后,这让我觉得有一个明显的答案,也许我们只是遗漏了.

顺便说一句,我们正在寻找的功能在技术上显而易见,因为用于拖放的YUI库按预期工作.不幸的是,我们不能仅仅重构网站以从jQuery切换到YUI.

那里有人有什么想法吗？我们会满足于只支持iPad的答案,但它确实不需要我们重构现有网站.

谢谢!

Answer 1

将其粘贴到.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', $.proxy(self, '_touchMove'))
        .on('touchend', $.proxy(self, '_touchEnd'));

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

早上给我打电话;)(这真是太傲慢了​​,我没有写这个解决方案,虽然我希望我有,如果我记得我找到它的话,我会参考它,如果有人知道这些代码来自哪里请评论和相信那个人)

更新:你走了:这是我发现的地方

Answer 2

我建议使用jQuery UI Touch Punch.我已经在iOS 5和Android 2.3上测试了它,它在两者上都很好用.

Answer 3

你可以尝试这个插件，但似乎适用于 iphone、ipod 和 ipad。不确定是否能解决您的问题。可以是具体的...

http://code.google.com/p/jquery-ui-for-ipad-and-iphone/

但android仍在寻找解决方案。

如果有帮助请告诉我。问候 里卡多·罗德里格斯