jquery - with - touch punch cdn




觸摸設備上的jQuery拖放(iPad,Android) (6)

LikWidT提供了最簡單的解決方案。 如果任何JQuery UI程序員可以將這些代碼或類似代碼添加到他們的包中,那就太好了。 Jquery當然是為Web開發人員構建拖放內容的最簡單的軟件包......不幸的是,這是幾乎所有設備都具有觸摸屏的一個主要缺陷。 我現在正在使用Surface Pro進行編碼,這個問題讓我親眼目睹了這些問題。

只是再次引用該網站: https//github.com/furf/jquery-ui-touch-punch

編輯:也是為了澄清這個修復是多麼簡單。 我必須首先確保我重新訂購我的包含文件,以便JQuery Javascript文件首先是Jquery UI Javascript然後我的CSS文件。 然後我只是在上面的帖子中復制/粘貼包含文件Javascript代碼,就是這樣。 我沒有修改任何代碼它只是一個實時查找任何觸摸並將它們轉換為等效鼠標操作的函數。 因此我對JQuery編碼器的上述斷言。

我們有一個卡片遊戲網站,它廣泛使用jQuery Draggable和Droppable,它使用了近一年(當使用鼠標時)幾乎完美無缺。

我們真的很想讓網站在觸摸屏設備上工作,但我們似乎無法獲得jQuery的拖拽,尤其是降低功能以便可靠地工作。

拖動工作“ok”,除非被拖動的div位於具有任何偏移,邊距,填充等的另一個dom元素內。如果是,則拖動的元素也從用戶的手指偏移相似的量。 可能聽起來不是什麼大不了的事,但它使界面變得不可用。

掉線似乎不起作用。

我們已經研究過這裡提出的各種選項(如果可以的話,會嘗試更新這篇文章的鏈接,但是沒有一個適用於我們)。

我們也研究過jQuery Mobile,但它仍處於alpha狀態,甚至更像是一個框架,使網站模擬手機的UI與我們正在尋找的。

關於這個主題的大多數SO和谷歌帖子似乎都在2010年末落後,這讓我覺得有一個明顯的答案,也許我們只是錯過了。

順便說一句,我們正在尋找的功能在技術上顯而易見,因為用於拖放的YUI庫按預期工作。 不幸的是,我們不能僅僅重構網站以從jQuery切換到YUI。

那裡有人有什麼想法嗎? 我們會選擇只支持iPad的答案,但它確實不需要我們重構現有網站。

謝謝!


鑑於我的工作:

eventAfterRender: function (event, element, view ) {
         element.draggable();
},

在Android 6.13 / samsung Galaxy tab S2下測試HTC One M8

function simulateMouseEvent (event, simulatedType) { //use this function to simulate mouse event

// restriction to preserve input use
    window.__touchInputs = {INPUT:1,TEXTAREA:1,SELECT:1,OPTION:1,'input':1,'textarea':1,'select':1,'option':1};
    if( window.__touchInputs[event.target.tagName] ) return ;

} 

將其粘貼到.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);

早上打電話給我;)(這真是太傲慢了​​,我沒有寫這個解決方案,雖然我希望我有,如果我記得我找到它的話,我會參考它,如果有人知道這些代碼來自哪裡請評論和相信那個人)

更新:你走了: 這是我發現的地方



舊線程我知道.......

@likwid_t答案的問題在於它還會阻止任何輸入或其他必須對“點擊”做出反應的元素(例如輸入),所以我寫了這個解決方案。 該解決方案使得可以在任何觸摸設備(或cumputer)上使用基於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,Erwin Haantjes







ipod-touch