, позволяющий перетаскивать мышью на сенсорном мобильном устройстве

Question

Недавно я получил телефон для Android и обнаружил, что перетаскивание на моем сайте не работает! Я понимаю, почему это не так, но кто-нибудь нашел решение для этого? Я использую JQuery для реализации D & D ...

Answer 1

У iPhone, по крайней мере, есть определенные события, такие как ontouchstart, ontouchend и т. Д. Это часть вебкита, но в отношении 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

Старой нить я знаю .......

я имею здесь решение, уважающее любой вход или другой элемент, который должен реагировать на «щелчки» (например, входы) на перетаскиваемом элементе. Это решение позволило использовать любую существующую библиотеку перетаскивания, которая основана на событиях mousedown, mousemove и mouseup на любом сенсорном устройстве (или в кумпане). Это также кросс-браузерное решение.

Я тестировал несколько устройств и работает быстро (в сочетании с функцией перетаскивания ThreeDubMedia (см. Также http://threedubmedia.com/code/event/drag)). Это решение jQuery, поэтому вы можете использовать его только с jQuery libs. Я использовал 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, Эрвин Haantjes

Answer 5

Я использовал JQuery UI сенсорный удар - это работает путем взлома MouseDown, особенности MouseUp и заменяет их touchstart, touchend и т.д.

О: http://touchpunch.furf.com/

SCRIPT: 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 6

Я использовал ответ touchpunch выше, и он отлично работал. Тем не менее, одно примечание. Я обнаружил, что с помощью ссылки GitHub на сайте (и выше):

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

не работаю для Android устройств, работающих под управлением мобильной Chrome, но сырой, удобочитаемый источник с сайта сделал работу , Это относится к дате публикации, это может быть исправлено, конечно, но, в среднем, возможно, это избавит вас от нескольких циклов отладки.