Перетаскиваемый элемент в iframe на мобильном телефоне глючит - PullRequest
Новая
       18

Перетаскиваемый элемент в iframe на мобильном телефоне глючит

0 голосов
/ 30 сентября 2019

Я создаю стороннее приложение, которое загружается через iframe.
iframe создает перетаскиваемый элемент рядом с ним.

При первой загрузке страницы (перед прокруткой страницы),перетаскиваемый (слайдер) работает нормально.
Но после прокрутки страницы за рамкой слайдера трудно заставить слайдер снова скользить.

(Обратите внимание, что это мобильная проблема, сафари наiOS особенно , но также и Chrome на iOS)

В следующей демонстрации я использовал библиотеку GSAP Draggable с реагированием для создания перетаскиваемого элемента, но также пытался закодировать его вОбычная реакция без удачи.

Вот демо: https://unfjl.csb.app/

Я пробовал много разных вещей (CSS, Touchevents и т. д.), но не могу заставить его работать ...

Что может вызвать такое поведение?

Обновление (без примера iframe)

Демонстрация без iframe: https://p5cu9.csb.app/

То жеПример с ползунком, как указано выше, но в этом примере перетаскиваемый отображается непосредственно в DОМ, а не в фрейме. Проблема все еще возникает. Я подозреваю, что это как-то связано с фиксированным положением css ползунка ...

1 Ответ

1 голос
/ 01 октября 2019

Это будет звучать очень странно, но ошибка в iOS Safari приводит к этому, и единственный известный мне способ обойти это (который я обнаружил сегодня через Googling) - это добавить слушателя "touchstart" в топстраница уровня (не iframe)! 

document.getElementsByTagName("body")[0].addEventListener("touchstart",function(){});

Это не то, что я могу добавить в Draggable, потому что он не сможет получить доступ к родительскому документу (за пределами iframe), чтобы добавить его должным образом (ограничения безопасности в браузере).

Вы также можете добавить прослушиватель touchforcechange, который предотвращает поведение по умолчанию (я добавлю это и к самому Draggable): 

yourDraggableElement.addEventListener("touchforcechange", function(event) {
  event.preventDefault();
});

Ошибки браузера - это весело, не так ли? ! ;)

(Первоначально ответили на форумах GreenSock на https://greensock.com/forums/topic/21450-draggable-in-iframe-on-mobile-is-buggy/?tab=comments#comment-101225)

...