使觸摸屏移動設備

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設備不工作。這是截至發佈日期，當然可能會得到修復，但同時它可能會爲您節省幾個調試周期。