MagicDraggable

MagicDraggable is a touch enabled, draggable component that can snap to configurable points inside its container.

Preview

Drag me

Code

<template>
  <magic-draggable
    id="magic-draggable-demo"
    class="bg-surface-elevation-base w-full h-[20rem] rounded-md"
  >
    <div
      class="bg-surface-elevation-high aspect-square w-32 rounded-md flex items-center justify-center"
    >
      <m-badge>Drag me</m-badge>
    </div>
  </magic-draggable>
</template>

<style>
[data-id='magic-draggable-demo'] {
  --magic-draggable-position: relative;
  --magic-draggable-z-index: 50;
}
</style>

Overview

• Overview
• Anatomy
• Installation
• Peer Dependencies
• API Reference
• Examples

Anatomy

<template>
  <magic-draggable id="your-draggable-id">
    <!-- your content -->
  </magic-draggable>
</template>

<script setup>
const { open } = useMagicDraggable('your-draggable-id')
</script>

Installation

CLI

Add @maas/vue-equipment to your dependencies.

pnpm

pnpm install @maas/vue-equipment

npm

npm install @maas/vue-equipment

yarn

yarn add @maas/vue-equipment

bun

bun install @maas/vue-equipment

Vue

If you are using Vue, import and add MagicDraggablePlugin to your app.

import { createApp } from 'vue'
import { MagicDraggablePlugin } from '@maas/vue-equipment/plugins'

const app = createApp({})

app.use(MagicDraggablePlugin)

Nuxt

The component is available as a Nuxt module. In your Nuxt config file add @maas/vue-equipment/nuxt to your modules and add MagicDraggable to the plugins in your configuration.

export default defineNuxtConfig({
  modules: ['@maas/vue-equipment/nuxt'],
  vueEquipment: {
    plugins: ['MagicDraggable'],
  },
})

Direct Import

If you prefer a more granular approach, the component can also be directly imported into any Vue component.

<script setup>
import { MagicDraggable } from '@maas/vue-equipment/plugins'
</script>

<template>
  <magic-draggable id="your-draggable-id">
    <!-- your content -->
  </magic-draggable>
</template>

Composable

In order to interact with the component from anywhere within your app, we provide a useMagicDraggable composable. Import it directly when needed.

import { useMagicDraggable } from '@maas/vue-equipment/plugins'

const { snapTo } = useMagicDraggable('your-draggable-id')

function handleClick() {
  snapTo('top-right')
}

TIP

If you have installed the component as a Nuxt module, the composable will be auto-imported and is automatically available in your Nuxt app.

Peer Dependencies

If you haven’t installed the required peer dependencies automatically, you’ll need to install the following packages manually.

Package
@nuxt/kit
@vueuse/core
defu

Installation

pnpm

pnpm install @nuxt/kit @vueuse/core defu

npm

npm install @nuxt/kit @vueuse/core defu

yarn

yarn add @nuxt/kit @vueuse/core defu

bun

bun install @nuxt/kit @vueuse/core defu

API Reference

Props

The component comes with a simple set of props. Only the id is required.

Prop	Type	Required
id	MaybeRef<string>	true
options	MagicDraggableOptions	false

Options

To customize the component override the necessary options. Any custom options will be merged with the default options.

Option	Type	Default
tag	string	'div'
threshold.distance	number	128
threshold.momentum	number	1.5
threshold.idle	number	250
threshold.lock	number	0
animation.snap.duration	number	500
animation.snap.easing	function	easeOutBack
initial.snapPoint	DraggableSnapPoint	'center'
snapPoints	DraggableSnapPoint[]	DraggableSnapPoint[]
scrollLock	boolean | object	object
scrollLock.padding	boolean	true
disabled	boolean	false

CSS Variables

In order to provide its basic functionality the component comes with some CSS. To ensure that the component is customizable, relevant values are available as CSS variables.

Variable	Default
--magic-draggable-position	fixed
--magic-draggable-width	100%
--magic-draggable-height	100%
--magic-draggable-z-index	999
--magic-draggable-inset	0
--magic-draggable-cursor	grab
--magic-draggable-cursor-dragging	grabbing

Examples

Resize

Preview

Code

<template>
  <magic-draggable
    id="magic-draggable-demo"
    class="bg-surface-elevation-base w-full h-[20rem] rounded-md"
    :options="{
      threshold: {
        lock: 10,
      },
    }"
  >
    <div
      :class="[
        'bg-surface-elevation-high w-40 rounded-md flex items-center justify-center transition-all duration-150',
        {
          'aspect-square': square,
          'aspect-[2/3]': !square,
        },
      ]"
    >
      <m-button @click="toggle">Resize</m-button>
    </div>
  </magic-draggable>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { MButton } from '@maas/mirror/vue'

const square = ref(true)

function toggle() {
  square.value = !square.value
}
</script>

<style>
[data-id='magic-draggable-demo'] {
  --magic-draggable-position: relative;
  --magic-draggable-z-index: 50;
}
</style>

Snap Points

Preview

Drag me

Code

<template>
  <magic-draggable
    id="magic-draggable-snap-points-demo"
    :options="{
      snapPoints: ['top', 'bottom', 'left', 'right'],
      initial: { snapPoint: 'top' },
    }"
    class="bg-surface-elevation-base w-full h-[20rem] rounded-md"
  >
    <div
      class="bg-surface-elevation-high aspect-square w-32 rounded-md flex items-center justify-center"
    >
      <m-badge>Drag me</m-badge>
    </div>
  </magic-draggable>
</template>

<style>
[data-id='magic-draggable-snap-points-demo'] {
  --magic-draggable-position: relative;
  --magic-draggable-z-index: 50;
}
</style>