在触摸屏移动设备上启用拖放

Question

我最近刚买了一部安卓手机，发现我网站上的拖放不起作用！我明白为什么它不会，但是有没有人找到解决这个问题的方法？我正在使用 JQuery 来实现 D&D...

Answer 1

我使用了 jQuery UI 触摸打孔器 - 它通过修改 mousedown、mouseup 功能并将它们替换为 touchstart、touchend 等来工作。

关于： http://touchpunch.furf.com/

脚本： https://raw.github.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js

代码：

包括：

<script src="jquery.ui.touch-punch.min.js"></script>

在您的标头中的 jquery UI 脚本文件之后。

Answer 2

我使用了上面的 touchpunch 答案，效果很好。不过，请注意。我发现使用网站上的 github 链接（及以上）：

脚本：https://raw.github.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js

不适用于运行移动 Chrome 的 Android 设备，但该网站的原始、人类可读的源代码确实有效。这是截至本文发布之日的，当然它可能会得到修复，但同时它可能会为您节省几个调试周期。

Answer 3

我知道的旧线程......

我在这里有一个解决方案，它尊重任何输入或其他必须对可拖动元素上的“点击”（例如输入）做出反应的元素。该解决方案可以在任何触摸设备（或计算机）上使用基于 mousedown、mousemove 和 mouseup 事件的任何现有拖放库。这也是一种跨浏览器的解决方案。

我已经在几台设备上进行了测试，它运行速度很快（结合 ThreeDubMedia 的拖放功能（另见 http://threedubmedia.com/code/event/drag））。它是一个 jQuery 解决方案，因此您只能将它与 jQuery 库一起使用。我使用了 jQuery 1.5.1，因为一些 较新的函数在 IE9 及更高版本中无法正常工作（未使用较新版本的 jQuery 进行测试）。

在之前将任何拖放操作添加到事件您必须先调用此函数：

simulateTouchEvents(<object>);

您还可以使用以下语法阻止所有组件/子组件进行输入或加速事件处理：

simulateTouchEvents(<object>, true); // ignore events on childs

这是我写的代码。我使用了一些不错的技巧来加快评估速度（参见代码）。

function simulateTouchEvents(oo,bIgnoreChilds)
{
 if( !$(oo)[0] )
  { return false; }

 if( !window.__touchTypes )
 {
   window.__touchTypes  = {touchstart:'mousedown',touchmove:'mousemove',touchend:'mouseup'};
   window.__touchInputs = {INPUT:1,TEXTAREA:1,SELECT:1,OPTION:1,'input':1,'textarea':1,'select':1,'option':1};
 }

$(oo).bind('touchstart touchmove touchend', function(ev)
{
    var bSame = (ev.target == this);
    if( bIgnoreChilds && !bSame )
     { return; }

    var b = (!bSame && ev.target.__ajqmeclk), // Get if object is already tested or input type
        e = ev.originalEvent;
    if( b === true || !e.touches || e.touches.length > 1 || !window.__touchTypes[e.type]  )
     { return; } //allow multi-touch gestures to work

    var oEv = ( !bSame && typeof b != 'boolean')?$(ev.target).data('events'):false,
        b = (!bSame)?(ev.target.__ajqmeclk = oEv?(oEv['click'] || oEv['mousedown'] || oEv['mouseup'] || oEv['mousemove']):false ):false;

    if( b || window.__touchInputs[ev.target.tagName] )
     { return; } //allow default clicks to work (and on inputs)

    // https://developer.mozilla.org/en/DOM/event.initMouseEvent for API
    var touch = e.changedTouches[0], newEvent = document.createEvent("MouseEvent");
    newEvent.initMouseEvent(window.__touchTypes[e.type], true, true, window, 1,
            touch.screenX, touch.screenY,
            touch.clientX, touch.clientY, false,
            false, false, false, 0, null);

    touch.target.dispatchEvent(newEvent);
    e.preventDefault();
    ev.stopImmediatePropagation();
    ev.stopPropagation();
    ev.preventDefault();
});
 return true;
}; 

它的作用： 首先，它将单点触摸事件转换为鼠标事件。它检查事件是否由必须拖动的元素上/中的元素引起。如果它是像 input、textarea 等输入元素，它会跳过翻译，或者如果附加了标准鼠标事件，它也会跳过翻译。

结果： 可拖动元素上的每个元素仍在工作。

快乐的编码，greetz， 欧文·汉杰斯

Answer 4

iPhone 至少有一些事件，例如 ontouchstart、ontouchend 等。这些都是 webkit 的一部分，但是关于 Android 的信息比 iPhone 少得多。我认为这个问题的答案是拖放功能需要使用这些事件而不是您通常使用的事件，或者需要同时使用两者。

这篇文章可能感兴趣 - http://backtothecode.blogspot.com/2009/10/javascript-touch-and-gesture-events.html

Answer 5

有一个支持手机/触摸屏设备的 jQuery 拖放插件：

http://plugins.jquery.com/project/mobiledraganddrop

在移动设备上，您点按以拾取物品，然后点按以选择放置位置。这解决了拖动操作被设备/浏览器劫持的问题。

Answer 6

我找到了一个适用于我的 Android 平板电脑触摸屏的示例 http://www.quirksmode.org/m/tests/drag.html 它使用“ontouchstart 事件”