Drag with a spring

HTML

<div
  class="box"
  data-vel-view="draggable"
  data-vel-plugin="DragWithSpringPlugin"
></div>

CSS

.box {
  width: 80px;
  height: 80px;
  background: whitesmoke;
  border-radius: 5px;
  touch-action: none;
  will-change: transform;
}

JavaScript

API Style:

Functions

Classes

import {
  createApp,
  DragEventPlugin,
  DragEvent
} from 'veloxi'

const DragWithSpringPlugin = (context) => {
  const dragEvent = context.useEventPlugin(DragEventPlugin)

  context.setup(() => {
    const draggable = context.getView('draggable')!

    draggable.position.animator.set('spring')

    dragEvent.addView(draggable)

    dragEvent.on(DragEvent, (event) => {
      if (event.isDragging) {
        draggable.position.set({ x: event.x, y: event.y })
      } else {
        draggable.position.reset()
      }
    })
  })
}

DragWithSpringPlugin.pluginName = 'DragWithSpringPlugin'
DragWithSpringPlugin.scope = 'draggable'

const app = createApp()
app.addPlugin(DragWithSpringPlugin)
app.run()

import {
  createApp,
  Plugin,
  DragEventPlugin,
  DragEvent
} from 'veloxi'

class DragWithSpringPlugin extends Plugin {
  static pluginName = 'DragWithSpringPlugin'
  static scope = 'draggable'

  dragEvent = this.useEventPlugin(DragEventPlugin)

  setup () {
    const draggable = this.getView('draggable')!

    draggable.position.animator.set('spring')

    dragEvent.addView(draggable)

    dragEvent.on(DragEvent, (event) => {
      if (event.isDragging) {
        draggable.position.set({ x: event.x, y: event.y })
      } else {
        draggable.position.reset()
      }
    })
  }
}

const app = createApp()
app.addPlugin(DragWithSpringPlugin)
app.run()