Перетаскивание HTML5 - не работает на iOS 12.1.2 (Safari и Chrome)

Эта страница на официальном сайте mongodb адресует точно этот вопрос:

http://docs.mongodb.org/ecosystem/tutorial/model-data- for-ruby-on-rails /

Когда мы показываем наш список историй, нам нужно будет показать имя пользователя, разместившего историю. Если бы мы использовали реляционную базу данных, мы могли бы выполнить соединение с пользователями и магазинами и получить все наши объекты в одном запросе. Но MongoDB не поддерживает объединения, и поэтому время от времени требуется бит денормализации. Здесь это означает кеширование атрибута «имя пользователя».

Реляционные пуристы уже чувствуют себя неловко, как будто мы нарушаем какой-то универсальный закон. Но давайте иметь в виду, что коллекции MongoDB не эквивалентны реляционным таблицам; каждая из которых служит уникальной проектной цели. Нормализованная таблица обеспечивает атомный изолированный кусок данных. Однако документ более тесно представляет собой объект в целом. В случае сайта социальных новостей можно утверждать, что имя пользователя является неотъемлемой частью истории, опубликованной.

blockquote>

1
задан Andy Mercer 28 January 2019 в 18:27
поделиться

3 ответа

Я написал ваш тестовый код codepen здесь: https://codepen.io/bobacus/pen/MLjZMg

. Мне было интересно, нужно ли добавлять слушателей в <li>. ] элементы, поэтому изменили некоторые части кода:

listEl = document.getElementById('my_list');
for (var i = 0; i < listEl.children.length; i ++) {
    itemEl = listEl.children[i];
    itemEl.addEventListener('dragstart', function(event) {
      dragging = getLI(event.target);
      if (dragging) {
          event.dataTransfer.setData('text/plain', null);
          event.dataTransfer.setDragImage(dragging, 0, 0);
      }
    });
}

Но это не сработало.

Я попробовал несколько разных вещей, но в итоге он заработал в Safari, добавив полифил, описанный здесь: https://www.codeproject.com/Articles/1091766/Add-support-for-standard -HTML-Drag-and-Drop-operat

Я добавил это в начало фрагмента HTML:

<script src="http://bernardo-castilho.github.io/DragDropTouch/DragDropTouch.js"></script>

Я надеюсь, что это полезно.

0
ответ дан Rob 28 January 2019 в 18:27
поделиться

К сожалению, у меня нет устройства с iOS12 (мое устройство не поддерживает его), и я не могу его протестировать. И я не знаю, почему поддержка iOS / Apple пишет, что они поддерживают это событие в iOS 11.2 и на вашем новом устройстве это не поддерживается.

Альтернативное решение

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

События

, dragstart, dragover, dragleave, drop не работают на всех сенсорных устройствах.

Вы должны использовать соответствующие имена событий для ваших сенсорных событий, например:

  • touchstart
  • touchend
  • touchcancel
  • touchmove

Прочитайте документацию об этом событии.

Чтобы обеспечить качественную поддержку сенсорных пользовательских интерфейсов, сенсорные события предлагают возможность интерпретировать действия пальцев (или стилуса) на сенсорных экранах или трекпадах.

Интерфейсы сенсорных событий представляют собой API-интерфейсы относительно низкого уровня, которые можно использовать для поддержки специфичных для приложения взаимодействий с несколькими касаниями, таких как жест двумя пальцами. Взаимодействие с несколькими касаниями начинается, когда палец (или стилус) впервые касается поверхности контакта. Другие пальцы могут впоследствии касаться поверхности и, необязательно, перемещаться по поверхности касания. Взаимодействие заканчивается, когда пальцы удалены с поверхности. Во время этого взаимодействия приложение получает сенсорные события во время фазы запуска, перемещения и завершения.

События касания аналогичны событиям мыши, за исключением того, что они поддерживают одновременные касания и находятся в разных местах на сенсорной поверхности. Интерфейс TouchEvent инкапсулирует все точки касания, которые в данный момент активны. Интерфейс Touch, представляющий одну точку касания, включает в себя такую ​​информацию, как положение точки касания относительно окна просмотра браузера.

К сожалению, события touchenter и touchleave были удалены из спецификации, и из-за этого, если вам это нужно, вы должны написать обходной путь, используя document.elementFromPoint(), как показано ниже:

[110 ]

Возможно, для некоторых других мобильных устройств и их браузеров вам понадобится использовать полифилы ( 1 , 2 ), которые позволяют Поддержка перетаскивания HTML5 на мобильных (сенсорных) устройствах.

0
ответ дан Bharata 28 January 2019 в 18:27
поделиться

За прошедшую неделю я провел много исследований на эту тему, а также провел много испытаний и отладок. Я обнаружил, что iOS поддерживает события перетаскивания, но iOS не вызывает их. (Начиная с iOS 12)

Если вы протестируете веб-страницу в iOS Safari, вы увидите, что все HTML-элементы имеют ondragstart, прикрепленные к их прототипу. События перетаскивания все там. Они просто никогда не срабатывают.

Другие столкнулись с этой проблемой также. Event Modernizer не обнаруживает поддержку Drag and Drop из-за этой ложной поддержки.

Кроме того, я просмотрел документы Safari, и нашел это :

Примечание для iOS: хотя перетаскивание не поддерживается, вы можете производить ... [1111 ]

Там написано «поддерживается», но сразу же ниже есть таблица событий, которая показывает drag и говорит, что она не «сгенерирована».

Это означает, что caniuse в настоящее время неверен и нуждается в обновлении.


Прямой ответ на вопрос

Код не работает только потому, что Apple решила не запускать события перетаскивания.

0
ответ дан Andy Mercer 28 January 2019 в 18:27
поделиться
Другие вопросы по тегам:

Похожие вопросы: