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

Question

我们有一个纸牌游戏网站，它广泛使用了 jQuery Draggable & Droppable，并且在将近一年的时间里(使用鼠标时)几乎完美无缺。

我们真的希望网站在触摸屏设备上运行，但我们似乎无法让 jQuery 的拖放功能可靠地运行。

拖动“正常”，除非被拖动的 div 位于另一个具有任何偏移、边距、填充等的 dom 元素内。如果是这样，则拖动的元素也会从用户的手指偏移类似的量。听起来可能没什么大不了，但它使界面无法使用。

丢弃似乎不起作用。

我们已经研究了这里提供的各种关于 SO 的选项(如果可以的话，将尝试用其中一些链接来更新这篇文章)，但没有一个对我们有用。

我们还研究了 jQuery Mobile，但它仍处于 alpha 阶段，即便如此，它似乎更像是一个让网站模拟手机 UI 而非我们正在寻找的 UI 的框架。

大多数 SO 和 Google 关于此主题的帖子似乎在 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);

早上调用我；)(这真的很自大，我没有写这个解决方案，虽然我希望我有，如果我记得我在哪里找到它，我会引用它，如果有人知道这段代码来自哪里请评论并注明该人)

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