"touchmove" - Alternative zu Touchenter?

[Silke Seide]

Hallo,

kurze Frage zu Touch-Events:

Gibt es in Vanilla-Javascript ein mouseover-Workaround als Touchevent? Touchenter bzw. Touchleave wurden ja nie implementiert...

Hintergrund: der Browser eines Mobile Devices soll detektieren, ob ein Element über ein anderes geschoben wird.

Natürlich lässt sich das z.B. mit "touchmove" touchItem.pageX, touchItem.pageY mit verhältnismäßig geringem Aufwand implementieren - nur liefert diese Methode fixe Koordinaten zurück - für Responsive Design eher unbrauchbar...

Dank für euren Input!

Silke

[Felix Riesterer]

Liebe Silke,

Hintergrund: der Browser eines Mobile Devices soll detektieren, ob ein Element über ein anderes geschoben wird.

wir sprechen von einer drag&drop-artigen Situation? Dazu benötigst Du im Grunde die üblichen Kandidaten wie

• mousedown
• mouseup
• touchstart
• touchend
• touchcancel

Um zu erkennen, ob eine Koordinate (z.B. eine Ecke Deines gerade bewegten Elements) innerhalb der Box eines anderen Elements ist, benötigst Du diesen Code:

/**
 * collision detection
 *
 * @param DOMElement some node
 * @param Object { left: (int), top: (int) }
 * @return bool
 */
function isCollidingWidth (element, lastCoords) {
  let rect = element.getBoundingClientRect();

  // last position inside test element?
  if (rect.top < lastCoords.top
    && rect.left < lastCoords.left
    && rect.bottom > lastCoords.top
    && rect.right > lastCoords.left
  ) {
    // yes!
    return true;
  }
}

Im Wesentlichen ist dieser Code aus meinem R-Quiz, bei dem mobile Geräte damit Drag&Drop auf Zielfelder machen können.

Liebe Grüße,

Felix Riesterer.

[Gunnar Bittersmann]

@@Felix Riesterer

wir sprechen von einer drag&drop-artigen Situation? Dazu benötigst Du im Grunde die üblichen Kandidaten wie

• mousedown
• mouseup
• touchstart
• touchend
• touchcancel

?? Keinen dieser Kandidaten würde ich in einer drag&drop-artigen Situation „üblich“ nennen.

Sondern die Drag and Drop API events:

• drag
• dragstart
• dragend
• dragover
• dragenter
• dragleave
• dragexit
• drop

[MDN]

LLAP 🖖

[JürgenB]

Hallo Silke,

kennst du schon diesen Artikel im Wiki?

Gruß
Jürgen