Proposal: Move events

I have a proposal for unifying touch and mouse events in order to make creating drag’n’drop interfaces easier. In the provided proposal I have created a fully functioning polyfill and ponyfill (I have used the ponyfill in production for half a year – and it’s great!)

The proposal adds multiple elements.

  1. Move event handlers: Instead of passing a function, you pass a class, which can have the methods onStart, onMove and onEnd. The instance is kept for the duration of a move event (start + move + end).
  2. Snapshots: You can create a snapshot of an element. Which is a non-interactive clone of the original element that you can place, move and remove. This should not be a real element.
  3. snapshotX/snapshotY: The coordinates used for placing the snapshot.
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)
  }
}

What are your thoughts?

Isn’t that what Pointer Events do?

1 Like

That’s true! I guess the text should be changed. The reason I came up with the proposal, and have used the ponyfill for a while is to simplify drag’n’drop interfaces.

a cool idea and yeah very usefull but i think you should add multidrag to the move class :

the class events are strongly linked (onStart-> onMove->onEnd) : the OnEnd event is sort like a kill switch for the move class wich mean i can’t drag an element more than one location from A to B if i want for exemple to drag an elemnt from pos A to pos B then stop in B and drag it to pos C or return to A i can’t do that .(the onMove event can’t be triggered again) it would be very cool if i can do that :wink:

Do you mean without releasing? Hmm. Want to sketch out an API, so it becomes clearer? :slight_smile: