Не запускаются события с помощью перетаскиваемых флажков Chrome (JS / CSS) - PullRequest
Новая
       34

Не запускаются события с помощью перетаскиваемых флажков Chrome (JS / CSS)

1 голос
/ 16 июня 2020

Я пытаюсь как можно точнее воспроизвести скользящие переключатели iOS, используя только JS и CSS. Я нашел отличное перо от @ 3rror404, которое делает именно это здесь .

Хотя оно отлично работает в iOS Safari, оно реагирует только на щелчки, а не на перетаскивание Chrome (и Desktop, и Android), и я не понимаю почему. Я даже добавил события mouseup / mousedown / mousemove, но все равно нет go .. 

for (let i = 0; i < switches.length; i++) {

  const switchEl = switches[i];

  switchEl.draggable = true;

  ['dragstart', 'touchstart','mousedown'].forEach(function(e) {
    switchEl.addEventListener(e, onDragStart);
  });

  ['dragover', 'touchmove','mousemove'].forEach(function(e) {
    switchEl.addEventListener(e, onDragOver);
  });

  ['dragend', 'touchend','mouseup'].forEach(function(e) {
    switchEl.addEventListener(e, onDragEnd);
  });

}

см. Мое отредактированное перо здесь: https://codepen.io/azerty1234/pen/BajLqgN

любое идея, почему это происходит или возможные исправления? Спасибо!

1 Ответ

1 голос
/ 16 июня 2020

Я обнаружил ошибку в ручке.

Он добавляет тот же обработчик событий для dragstart, а touchstart Chrome (в мобильном режиме) запускает событие touchstart.

Событие touchstart не имеет переменных pageX и pageY (строки 64 и 65)

У него есть evt.touches[0].pageX и evt.touches[0].pageY

Вы должны проверить если evt.type равно 'touchstart' или нет: 

function onDragStart(evt) {
  evt = evt || window.event;
  const x = (evt.type == 'touchstart') ? evt.touches[0].pageX : evt.pageX,
        y = (evt.type == 'touchstart') ? evt.touches[0].pageY : evt.pageY;
...

function onDragOver(evt) {
  evt = evt || window.event;

  evt.preventDefault();
  const x = (evt.type == 'touchmove') ? evt.touches[0].pageX : evt.pageX,
        y = (evt.type == 'touchmove') ? evt.touches[0].pageY : evt.pageY;
...

Примените это изменение в onDragOver (64,65) и onDragStart (90,91), и оно будет работать в мобильном режиме

...