Components
Draggable Card
Interactive card that can be dragged around with 3D tilt effects.
Draggable Card
The DraggableCard component creates an interactive card that can be dragged around with 3D tilt effects. It combines drag functionality with dynamic 3D transformations for a playful, engaging user experience.
Usage
Draggable Card
This card can be dragged around the screen.
<template>
<MDraggableCard>
<template #header>
<h3 class="text-lg font-semibold">Draggable Card</h3>
</template>
<p>This card can be dragged around the screen.</p>
</MDraggableCard>
</template>
Props
class
string
CSS classes to apply to the card content.
containerClass
string
CSS classes to apply to the card container.
ui
object
UI configuration for the underlying UCard component.
Examples
Basic Draggable Card
Interactive Widget
Drag MeThis draggable card can be moved around the screen. Try dragging it to reposition it anywhere!
Release to snap back to position
Drag handle in top right
<template>
<MDraggableCard>
<template #header>
<h3 class="text-lg font-semibold">Basic Draggable Card</h3>
</template>
<p>Drag me around! I'll snap back to my original position when released.</p>
</MDraggableCard>
</template>
With Custom Styling
Styled Draggable Card
This card has custom gradient styling.
<template>
<MDraggableCard
class="bg-gradient-to-br from-purple-500 to-indigo-600 text-white border-0"
>
<template #header>
<h3 class="text-lg font-semibold">Styled Draggable Card</h3>
</template>
<p>This card has custom gradient styling.</p>
</MDraggableCard>
</template>
With Container Class
Centered Draggable Card
This card is centered within its container.
<template>
<MDraggableCard container-class="mx-auto">
<template #header>
<h3 class="text-lg font-semibold">Centered Draggable Card</h3>
</template>
<p>This card is centered within its container.</p>
</MDraggableCard>
</template>
With Custom Content
Media Card
Beautiful mountain landscape
<template>
<MDraggableCard>
<template #header>
<div class="flex items-center space-x-2">
<UIcon name="i-lucide-image" class="w-5 h-5" />
<h3 class="text-lg font-semibold">Media Card</h3>
</div>
</template>
<div class="space-y-2">
<img
src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80"
alt="Mountain"
class="w-full h-32 object-cover rounded"
/>
<p class="text-gray-600 dark:text-gray-400">Beautiful mountain landscape</p>
</div>
</MDraggableCard>
</template>