Как заставить jQueryUI drag\drop работать с сенсорными устройствами
Это одна из ситуаций, когда я надеюсь, что кто-то ответит, чтобы сказать мне, что я идиот. Но я продолжаю удивляться тому, что jQueryUI drag\drop не работает с сенсорными устройствами. Я не проверял их все, но я пробовал iphone\ipad\android 2, 3 и 4 за последний год и ничего. Только что попробовал последнюю версию на новом Android. Еще ничего. Не верьте мне, просто посетите демонстрационную страницу на мобильном устройстве и попробуйте использовать примеры перетаскивания. Ничего такого.
Есть ли здесь техническая проблема или несовместимость ядра? Исправление настолько простое, что о нем не стоит писать? Разработчики jQuery не используют мобильные устройства? Я видел "исправления", опубликованные здесь и там вокруг Stack Overflow, но все они "хаки", и все те, которые я пробовал, не работают.
Я в замешательстве. Может кто-нибудь пролить свет на эту проблему?
4 ответа
Если вы просто хотите, чтобы ваш текущий код jQuery UI работал с сенсорными событиями, вы можете использовать патч обезьяны JQuery UI Touch Punch.
Единственная "техническая проблема или несовместимость ядра" заключается в том, что пользовательский интерфейс jQuery (1.x) прослушивает только события мыши, но не события касания (см. Ответ @ScottGonzales по исторической причине). JQuery Touch Punch, выше, делает это изменение. Вы даже можете попробовать некоторые примеры jQuery UI на этой странице, и они работают. Обычно использование Touch Punch является в настоящее время приемлемым решением.
Существует долгая история того, почему jQuery UI не поддерживает сенсорные устройства, но сводится к тому, что Touch Event был нестандартной реализацией для WebKit. В то время будущее выглядело тоскливо. У Apple были патенты, к которым никто не хотел приближаться; В результате Mozilla внедрила собственную систему сенсорных событий с потоками, которые никогда не завоевывали популярность. Было неясно, что будут делать Microsoft и Opera. Пол Бакаус (создатель jQuery UI) хотел получить поддержку iPhone 4 года назад. Я хотел дождаться официального стандарта.
Прошло время, Mozilla отказалась от сенсорных событий, а Microsoft внедрила собственную систему указательных событий. W3C сформировал рабочую группу для стандартизации Touch Events и изучения патентов Apple. Рабочая группа Touch Events опубликовала рекомендацию и распустила. В итоге Microsoft представила предложение стандартизировать Pointer Events, и теперь существует рабочая группа W3C Pointer Events.
В настоящее время мы работаем над независимой от устройств перепиской всех взаимодействий jQuery UI, которые будут частью jQuery UI 2.0. До этого вы можете использовать jQuery UI Touch Punch.
Ранее в этом году я писал о некоторых событиях, связанных с Touch Events, и о том, почему Pointer Events обеспечивают лучшее будущее. Вы можете прочитать об этом в блоге jQuery.
Использование jQuery UI Touch Punch кажется лучшим подходом.
<script src="../jquery-ui-1.13.0/external/jquery/jquery.js"></script>
<script src="../jquery-ui-1.13.0.custom/jquery-ui.min.js"></script>
<script src="../jquery-ui-1.13.0/jquery-ui.min.js"></script>
<script src="../jquery-ui-touch-punch/jquery.ui.touch-punch.min.js"></script>
<link href="../bootstrap-5.1.1/css/bootstrap.min.css" rel="stylesheet" />
<script>
$(function () {
$("#sortable").sortable();
});
</script>
<div class="container">
<div class="row">
<div class="col-md-12">
<ul id="sortable" class="list-group">
<li class="list-group-item active">Item 1</li>
<li class="list-group-item">Item 2</li>
<li class="list-group-item">Item 3</li>
<li class="list-group-item">Item 4</li>
<li class="list-group-item">Item 5</li>
<li class="list-group-item">Item 6</li>
<li class="list-group-item">Item 7</li>
<li class="list-group-item">Item 8</li>
</ul>
</div>
</div>
</div>
Проверьте jQTouch
Это плагин jQuery, который помогает преодолеть разрывы между настольными и сенсорными устройствами.