Adrian_Odeby_Helvik
2019-10-30
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.
- 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).
- 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.
- 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?
