Возможность перетаскивания на мобильное устройство с сенсорным экраном

Ответ 1

Я использовал jQuery UI touch punch - он работает, взламывая mousedown, функции mouseup и заменяет их touchstart, touchhend и т.д.

О: 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 script в вашем заголовке.

Ответ 2

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

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

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

Ответ 3

Старый поток, который я знаю.......

У меня есть решение, которое учитывает любой вход или другой элемент, который должен реагировать на "щелчки" (например, входы) на перетаскиваемом элементе. Это решение позволило использовать любую существующую библиотеку перетаскивания, которая основана на событиях 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, Эрвин Хаантес

Ответ 4

У iPhone, по крайней мере, есть определенные события, такие как ontouchstart, ontouchend и т.д. Это часть вебкита, но в отношении Android гораздо меньше информации, чем iPhone. Я думаю, что ответ на этот вопрос заключается в том, что функциональность перетаскивания должна использовать эти события, а не те события, которые вы обычно используете, или должны использовать их.

Эта статья может представлять интерес - http://backtothecode.blogspot.com/2009/10/javascript-touch-and-gesture-events.html

Ответ 5

Существует плагин jQuery drag-and-drop, поддерживающий мобильные/сенсорные устройства:

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

На мобильном устройстве нажмите, чтобы выбрать элемент, и коснитесь, чтобы выбрать место перетаскивания. Это связано с тем, что элементы перетаскивания захвачены устройством/браузером.

Ответ 6

Я нашел пример, который работает на моем сенсорном экране Android-планшета http://www.quirksmode.org/m/tests/drag.html Он использует событие ontouchstart