Felix Riesterer: "touchmove" - Alternative zu Touchenter?

Beitrag lesen

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.