Skip to content
No description, website, or topics provided.
JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.README.md.swp
.gitignore
README.md
index.html
package.json

README.md

Move events proposal

Okay. Implementing drag'n'drop interfaces is tedious. There are too many problems with how it is normally done for me to list them here. So I'll fix them instead.

Usage as polyfill

import { polyfill } from 'proposal-move-events'

polyfill()

element.moveHandler = class Move {
  onStart(event) {
    event.preventDefault()
    this.snapshot = document.createSnapshot(this.element)
    this.element.style.opacity = 0
    this.initialX = event.snapshotX
    this.initialY = event.snapshotY
    this.snapshot.place({
      x: event.snapshotX,
      y: event.snapshotY
    })
  }

  onMove(event) {
    this.snapshot.move({
      x: event.snapshotX,
      y: event.snapshotY,
    })
  }

  onEnd(event) {
    this.snapshot.move({
      x: this.initialX,
      y: this.initialY,
      transition: 300,
    })
    setTimeout(() => {
      this.element.style.opacity = 1
      this.snapshot.remove()
    }, 300)
  }
}

Live example: https://adrianhelvik.github.io/proposal-move-events

Usage as ponyfill

Use this in production, not the polyfill. The polyfill is only intended as a demo of how this could be used if the proposal is standardized.

import { setMoveHandler, createSnapshot } from 'proposal-move-events'

setMoveHandler(element, class Move {
  onStart(event) {
    event.preventDefault()
    this.snapshot = createSnapshot(this.element)
    this.element.style.opacity = 0
    this.initialX = event.snapshotX
    this.initialY = event.snapshotY
    this.snapshot.place({
      x: event.snapshotX,
      y: event.snapshotY
    })
  }

  onMove(event) {
    this.snapshot.move({
      x: event.snapshotX,
      y: event.snapshotY,
    })
  }

  onEnd(event) {
    this.snapshot.move({
      x: this.initialX,
      y: this.initialY,
      transition: 300
    })
    setTimeout(() => {
      this.element.style.opacity = 1
      this.snapshot.remove()
    }, 300)
  }
})

No proper move events

HTML5 drag'n'drop events are not a pleasure to use, so we tend to implement things using mose and touch events. When doing this it is way too common to duplicate logic.

So I propose a new way to handle this...

Moves

An important rationale behind moves is that a move has a start, a duration and an end. For mouse events, mousemove, mousedown and mouseup works okay.

There is only one mouse, so you can easily add an event for mousedown, mousemove and mouseup (using the APIs however...).

For touch events however, we have to handle multiple touches. From what I've seen online the majority of usage is subtly incorrect. Often relying on event.touches[0].

Lets create an abstraction around a move. A move has a start, a beginning and an end and shares data between these three states. What a perfect use case for classes.

class Move {
  onStart(event) {}
  onMove(event) {}
  onEnd(event) {}
}

Perfect! We now need a way to attach a move to an element. What should the API be for this? I am not 100% happy with it. Naming things is hard! But here it goes.

element.moveHandler = Move
You can’t perform that action at this time.