Motion+

Drag

An example of making an element draggable using Motion for Vue's drag prop.

Vue
>Live exampleOpen

Source code


<script setup>
import { motion } from 'motion-v'
</script>

<template>
  <div class="container">
    <motion.div drag class="box" />
  </div>
</template>


<style>
.container {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
}

.box {
  width: 100px;
  height: 100px;
  background-color: var(--hue-6);
  border-radius: 10px;
}
</style>

Related examples

Latest in Vue

Motion+

Unlock all 400+ examples

  • Source code for every Plus example.
  • Provide examples direct to your agent via Motion's MCP.
  • Lifetime access to new examples and APIs.