Drag: Constraints

An example of making an element draggable using Motion for Vue's drag prop. You can even set drag constraints by providing a ref to another element.

Vue

MotionScore

RIck HupFebruary 12, 2025

Source code

<script setup>
import { motion } from "motion-v"
import { ref } from "vue"

const constraintsRef = ref(null)
</script>

<template>
    <div ref="constraintsRef" class="constraints">
        <motion.div
            drag
            :dragConstraints="constraintsRef"
            :dragElastic="0.2"
            class="box"
        />
    </div>
</template>

<style>
.constraints {
    width: 300px;
    height: 300px;
    background-color: var(--hue-1-transparent);
    border-radius: 10px;
}

.box {
    width: 100px;
    height: 100px;
    background-color: #ff0088;
    border-radius: 10px;
}
</style>