1

I'm trying to replicate as closely as possible the sliding toggles of iOS, using just JS and CSS. I've found the excellent pen by @3rror404 that does exactly that here.

While it works perfectly in iOS Safari , it does react just to clicks and not to drags in Chrome (both Desktop and Android) and I don't understand why. I even added mouseup/mousedown/mousemove events, but still a no 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);
  });

}

see my edited pen here: https://codepen.io/azerty1234/pen/BajLqgN

any idea why this happens or possible fixes? Thanks!

Aldo
  • 303
  • 1
  • 4
  • 14
  • I've just tried the pen in Chrome 83.0.4103.106 and dragging works fine. – dehart Jun 16 '20 at 13:45
  • I've tried it and it feels very clunky on Chrome 83.0.4103.61. – Daan Jun 16 '20 at 13:49
  • @dehart: wow, that's strange: I've tried on Chrome 83.0.4103.97 (Official Build) (64-bit) on Win10 and it works using Mouse but does not in Dev mode using device emulation Also, mouse events go crazy after the first click and toggle triggers on mouseover afterwards. Nor does it work (dragging) on Chrome 83 on Android – Aldo Jun 16 '20 at 14:03
  • @Daan: any improvement is welcome :) – Aldo Jun 16 '20 at 14:04

1 Answers1

1

I found a bug in the pen.

It adds the same event handler for dragstart and touchstart Chrome (in mobile mode) fires the touchstart event.

The touchstart event does not have a pageX and pageY variable (line 64 and 65)

It does have evt.touches[0].pageX and evt.touches[0].pageY

You should check if evt.type equals 'touchstart' or not:

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;
...

Apply this change in onDragOver (64,65) and onDragStart (90,91) and it will work in mobile mode

dehart
  • 1,554
  • 15
  • 18
  • I was a bit confused about touchstart/dragstart, but you clarified very well – Aldo Jun 16 '20 at 15:35
  • 1
    Should anyone come across this, I've updated @turnip (3rror404) original pen with dehart fixes here: https://codepen.io/azerty1234/pen/ZEQpwoL – Aldo Jun 16 '20 at 15:38