Skip to content

Commit

Permalink
feat: enhance drag and drop interface with custom classes and improve…
Browse files Browse the repository at this point in the history 
…d styles
  • Loading branch information
@Spikeysanju
Spikeysanju committed Nov 12, 2024
1 parent 87c8caa commit a1661b6
Show file tree
Hide file tree
Showing 4 changed files with 132 additions and 62 deletions.
90 changes: 63 additions & 27 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -339,49 +339,66 @@ interface DragDropState<T = unknown> {
high: 'bg-red-50 text-red-700'
}[priority];
};
const dragStyles = {
low: 'bg-gradient-to-r from-sky-400/30 via-blue-400/20 to-indigo-400/30 backdrop-blur-lg',
medium:
'bg-gradient-to-r from-amber-400/30 via-orange-400/20 to-yellow-400/30 backdrop-blur-lg',
high: 'bg-gradient-to-r from-rose-400/30 via-red-400/20 to-pink-400/30 backdrop-blur-lg'
};
</script>
<div class="min-h-screen bg-gray-50 p-8">
<div class="min-h-screen bg-gradient-to-br from-slate-50 to-gray-100 p-8">
<div class="mb-8 flex flex-col gap-2">
<h1 class="text-2xl font-bold text-gray-900">Sortable List</h1>
<p class="text-gray-600">Drag and drop items to reorder them in the list.</p>
<h1 class="text-2xl font-bold text-gray-900">Custom classes</h1>
<p class="text-gray-600">You can add custom classes to the draggable and droppable elements.</p>
</div>
<div class="w-80">
<div class="rounded-xl bg-gray-100 p-4 shadow-sm ring-1 ring-gray-200">
<div class="space-y-3">
<div class="rounded-xl bg-white/40 p-4 shadow-lg ring-1 ring-white/60 backdrop-blur-xl">
<div class="space-y-4">
{#each items as item, index (item.id)}
<div
use:draggable={{ container: index.toString(), dragData: item }}
use:droppable={{
container: index.toString(),
callbacks: { onDrop: handleDrop },
attributes: {
draggingClass: 'border border-blue-500',
dragOverClass: 'border border-red-500'
draggingClass: 'scale-105 rotate-2 !shadow-2xl !ring-2 ring-blue-500/50 z-50',
dragOverClass: 'scale-98 -rotate-1 !shadow-inner !ring-2 ring-emerald-500/50'
}
}}
animate:flip={{ duration: 200 }}
in:fade={{ duration: 150 }}
out:fade={{ duration: 150 }}
class="svelte-dnd-touch-feedback cursor-move rounded-lg bg-white p-3 shadow-sm
ring-gray-200 transition-all duration-200 hover:shadow-md hover:ring-2 hover:ring-blue-200"
animate:flip={{ duration: 400, easing: 'cubic-bezier(0.4, 0, 0.2, 1)' }}
in:fade={{ duration: 300 }}
out:fade={{ duration: 200 }}
class="group relative cursor-move rounded-lg p-4
shadow-md ring-1 ring-white/60
backdrop-blur-md transition-all duration-500
ease-out hover:-rotate-1 hover:scale-[1.02]
hover:shadow-xl active:shadow-inner
{dragStyles[item.priority]}"
>
<div class="mb-2 flex items-start justify-between gap-2">
<h3 class="font-medium text-gray-900">
{item.title}
</h3>
<span
class={`rounded-full px-2 py-0.5 text-xs font-medium ${getPriorityColor(
item.priority
)}`}
>
{item.priority}
</span>
<div class="relative overflow-hidden rounded-md">
<!-- Enhanced gradient overlay -->
<div
class="absolute inset-0 bg-gradient-to-br from-white/10 via-transparent to-white/20 opacity-0
transition-all duration-500 group-hover:opacity-100"
/>
<!-- Kanban card content -->
<div class="relative z-10 space-y-2">
<div class="flex items-start justify-between">
<h3 class="font-medium text-gray-900">{item.title}</h3>
<span
class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium
{getPriorityColor(item.priority)}"
>
{item.priority}
</span>
</div>
<p class="text-sm text-gray-600">{item.description}</p>
</div>
</div>
<p class="text-sm text-gray-500">
{item.description}
</p>
</div>
{/each}
</div>
Expand All @@ -391,12 +408,31 @@ interface DragDropState<T = unknown> {
<style>
:global(.dragging) {
@apply opacity-50 shadow-lg ring-2 ring-blue-400;
@apply opacity-60;
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse {
0%,
100% {
opacity: 0.6;
}
50% {
opacity: 0.8;
}
}
:global(.drag-over) {
@apply bg-blue-50;
}
/* Add custom scaling utility */
.scale-102 {
transform: scale(1.02);
}
.scale-98 {
transform: scale(0.98);
}
</style>
```

Expand Down
3 changes: 2 additions & 1 deletion src/routes/+layout.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@
{ path: '/horizontal-scroll', title: 'Horizontal Scroll' },
{ path: '/grid-sort', title: 'Grid Sort' },
{ path: '/nested', title: 'Nested Containers' },
{ path: '/multiple', title: 'Multiple' }
{ path: '/multiple', title: 'Multiple' },
{ path: '/custom-classes', title: 'Custom Classes' }
];
const cn = (...classes: string[]) => classes.filter(Boolean).join(' ');
Expand Down
90 changes: 63 additions & 27 deletions src/routes/custom-classes/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,49 +49,66 @@
high: 'bg-red-50 text-red-700'
}[priority];
};
const dragStyles = {
low: 'bg-gradient-to-r from-sky-400/30 via-blue-400/20 to-indigo-400/30 backdrop-blur-lg',
medium:
'bg-gradient-to-r from-amber-400/30 via-orange-400/20 to-yellow-400/30 backdrop-blur-lg',
high: 'bg-gradient-to-r from-rose-400/30 via-red-400/20 to-pink-400/30 backdrop-blur-lg'
};
</script>

<div class="min-h-screen bg-gray-50 p-8">
<div class="min-h-screen bg-gradient-to-br from-slate-50 to-gray-100 p-8">
<div class="mb-8 flex flex-col gap-2">
<h1 class="text-2xl font-bold text-gray-900">Sortable List</h1>
<p class="text-gray-600">Drag and drop items to reorder them in the list.</p>
<h1 class="text-2xl font-bold text-gray-900">Custom classes</h1>
<p class="text-gray-600">You can add custom classes to the draggable and droppable elements.</p>
</div>

<div class="w-80">
<div class="rounded-xl bg-gray-100 p-4 shadow-sm ring-1 ring-gray-200">
<div class="space-y-3">
<div class="rounded-xl bg-white/40 p-4 shadow-lg ring-1 ring-white/60 backdrop-blur-xl">
<div class="space-y-4">
{#each items as item, index (item.id)}
<div
use:draggable={{ container: index.toString(), dragData: item }}
use:droppable={{
container: index.toString(),
callbacks: { onDrop: handleDrop },
attributes: {
draggingClass: 'border border-blue-500',
dragOverClass: 'border border-red-500'
draggingClass: 'scale-105 rotate-2 !shadow-2xl !ring-2 ring-blue-500/50 z-50',
dragOverClass: 'scale-98 -rotate-1 !shadow-inner !ring-2 ring-emerald-500/50'
}
}}
animate:flip={{ duration: 200 }}
in:fade={{ duration: 150 }}
out:fade={{ duration: 150 }}
class="svelte-dnd-touch-feedback cursor-move rounded-lg bg-white p-3 shadow-sm
ring-gray-200 transition-all duration-200 hover:shadow-md hover:ring-2 hover:ring-blue-200"
animate:flip={{ duration: 400, easing: 'cubic-bezier(0.4, 0, 0.2, 1)' }}
in:fade={{ duration: 300 }}
out:fade={{ duration: 200 }}
class="group relative cursor-move rounded-lg p-4
shadow-md ring-1 ring-white/60
backdrop-blur-md transition-all duration-500
ease-out hover:-rotate-1 hover:scale-[1.02]
hover:shadow-xl active:shadow-inner
{dragStyles[item.priority]}"
>
<div class="mb-2 flex items-start justify-between gap-2">
<h3 class="font-medium text-gray-900">
{item.title}
</h3>
<span
class={`rounded-full px-2 py-0.5 text-xs font-medium ${getPriorityColor(
item.priority
)}`}
>
{item.priority}
</span>
<div class="relative overflow-hidden rounded-md">
<!-- Enhanced gradient overlay -->
<div
class="absolute inset-0 bg-gradient-to-br from-white/10 via-transparent to-white/20 opacity-0
transition-all duration-500 group-hover:opacity-100"
/>

<!-- Kanban card content -->
<div class="relative z-10 space-y-2">
<div class="flex items-start justify-between">
<h3 class="font-medium text-gray-900">{item.title}</h3>
<span
class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium
{getPriorityColor(item.priority)}"
>
{item.priority}
</span>
</div>
<p class="text-sm text-gray-600">{item.description}</p>
</div>
</div>
<p class="text-sm text-gray-500">
{item.description}
</p>
</div>
{/each}
</div>
Expand All @@ -101,10 +118,29 @@

<style>
:global(.dragging) {
@apply opacity-50 shadow-lg ring-2 ring-blue-400;
@apply opacity-60;
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse {
0%,
100% {
opacity: 0.6;
}
50% {
opacity: 0.8;
}
}
:global(.drag-over) {
@apply bg-blue-50;
}
/* Add custom scaling utility */
.scale-102 {
transform: scale(1.02);
}
.scale-98 {
transform: scale(0.98);
}
</style>
11 changes: 4 additions & 7 deletions src/routes/grid-sort/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,7 @@
}
</script>

<div
class="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 p-8 dark:from-slate-900 dark:to-slate-800"
>
<div class="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 p-8">
<div class="max-w-2xl">
<div class="mb-8 flex flex-col gap-2">
<h1 class="text-2xl font-bold text-gray-900">SortGable Grid</h1>
Expand All @@ -40,24 +38,23 @@
<div
use:droppable={{ container: index.toString(), callbacks: { onDrop: handleDrop } }}
class="relative aspect-square rounded-xl bg-white/50 p-1 backdrop-blur-sm
transition-all duration-300 hover:bg-white/60 dark:bg-slate-800/50"
transition-all duration-300 hover:bg-white/60"
animate:flip={{ duration: 300 }}
>
<div
use:draggable={{
container: index.toString(),
dragData: card
}}
class={`h-full w-full cursor-move rounded-lg bg-gradient-to-br ${card.color} shadow-lg transition-all duration-300 hover:scale-[1.02] hover:shadow-xl active:scale-95 active:brightness-110 svelte-dnd-touch-feedback`}
class={`h-full w-full cursor-move rounded-lg bg-gradient-to-br ${card.color} svelte-dnd-touch-feedback shadow-lg transition-all duration-300 hover:scale-[1.02] hover:shadow-xl active:scale-95 active:brightness-110`}
>
<div class="flex h-full items-center justify-center">
<span class="text-4xl">{card.icon}</span>
</div>
</div>
<div
class="absolute -bottom-2 left-1/2 -translate-x-1/2 rounded-full bg-white/90
px-3 py-1 text-xs font-medium text-slate-600 shadow-sm dark:bg-slate-700
dark:text-slate-300"
px-3 py-1 text-xs font-medium text-slate-600 shadow-sm"
>
Position {index + 1}
</div>
Expand Down

0 comments on commit a1661b6

Please sign in to comment.