使触摸屏移动设备

Question

我刚刚得到了一个Android手机，发现拖上我的网站不能正常工作砸拖放！我明白为什么它不会，但有人找到了解决办法？我正在使用JQuery来实现D ...

Answer 1

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

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

Answer 2

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

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

在移动设备上，你点击选取该项目，然后点击选择放置位置。这解决了拖动操作被设备/浏览器劫持的问题。

Answer 3

我发现，在我的Android平板电脑的触摸屏 http://www.quirksmode.org/m/tests/drag.html 工作的范例它使用“ontouchstart事件”

Answer 4

旧线，我知道.......

我这里有尊重的解决方案任何输入或其他元素必须对可拖动元素上的“点击”（例如输入）做出反应。该解决方案使得能够使用任何现有的拖放其是基于鼠标按下，鼠标移动库和mouseup任何触摸装置（或cumputer）上的事件。这也是一个跨浏览器的解决方案。

我已经测试了几个设备，它工作快速（结合拖放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等input元素，它会跳过翻译，或者如果标准鼠标事件附加到它，它也会跳过翻译。

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

快乐编码，格尔茨， 欧文Haantjes

Answer 5

我使用jQuery UI的触摸冲床 - 它的工作原理是黑客鼠标按下，鼠标松开功能以及与touchstart替换它们，touchend等

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

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

CODE：

包括：

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

在你的头你的jQuery UI的脚本文件之后。

Answer 6

我用上面的touchpunch答案，它工作得很好。不过，还有一点需要注意。我发现，使用GitHub的链接在网站上（及以上）：

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

从网站运行的移动浏览器，但原始的，人类可读的源并工作Android设备不工作。这是截至发布日期，当然可能会得到修复，但同时它可能会为您节省几个调试周期。