-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.astro
112 lines (108 loc) · 4.13 KB
/
index.astro
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
---
import BaseLayout from "@/layouts/BaseLayout.astro";
---
<script
src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.14.0/Sortable.min.js"
></script>
<BaseLayout>
<section class="bg-white relative overflow-hidden">
<div
class="w-full mx-auto 2xl:max-w-7xl flex flex-col justify-center py-24 relative p-8">
<div class="max-w-xl mx-auto text-center">
<div
class="prose text-gray-500 prose-sm prose-headings:font-normal prose-headings:text-xl mx-auto max-w-sm w-full">
<div>
<h1>Drag and Drop</h1>
<p class="text-balance">
Drag from any of the items to the desired location.
</p>
</div>
</div>
</div>
<div class="max-w-3xl mx-auto flex flex-col mt-6 border-t border-neutral-200 pt-12">
<div
id="movable-items"
class="grid gap-2 grid-cols-2 md:grid-cols-4 mt-4">
<!-- Items in the Grid -->
<div
class="bg-blue-100 rounded-lg p-8 movable-item hover:cursor-grab text-blue-900">
Item 1
</div>
<div
class="bg-blue-200 rounded-lg p-8 movable-item hover:cursor-grab text-blue-900">
Item 2
</div>
<div
class="bg-blue-300 rounded-lg p-8 movable-item text-blue-900 hover:cursor-grab">
Item 3
</div>
<div
class="bg-blue-400 rounded-lg p-8 movable-item text-white hover:cursor-grab">
Item 4
</div>
<div
class="bg-blue-500 rounded-lg p-8 movable-item text-white hover:cursor-grab">
Item 5
</div>
<div
class="bg-blue-600 rounded-lg p-8 movable-item text-white hover:cursor-grab">
Item 6
</div>
<div
class="bg-blue-700 rounded-lg p-8 movable-item text-white hover:cursor-grab">
Item 7
</div>
<div
class="bg-blue-800 rounded-lg p-8 text-white movable-item hover:cursor-grab">
Item 8
</div>
</div>
</div>
</div>
</section>
<!-- Starts links to tutorial -->
<div
class="pointer-events-none fixed inset-x-0 bottom-0 sm:flex sm:justify-center p-2">
<div
class="pointer-events-auto flex w-full max-w-md divide-x divide-neutral-200 rounded-lg bg-white shadow-xl border border-neutral-200">
<div class="flex w-0 flex-1 items-center p-4">
<div class="w-full">
<p class="text-sm font-medium text-neutral-900">Tutorial</p>
<p class="mt-1 text-sm text-neutral-500">
How to create a drag and drop with Tailwind CSS and JavaScript
</p>
<p class="mt-2 text-xs text-orange-600 underline">
<a href="https://lexingtonthemes.com"> by © Lexington Themes</a>
</p>
</div>
</div>
<div class="flex">
<div class="flex flex-col divide-y divide-neutral-200">
<div class="flex h-0 flex-1">
<a
href="https://lexingtonthemes.com/tutorials/how-to-create-a-drag-and-drop-with-tailwind-css-and-javascript/"
type="button"
class="flex w-full items-center justify-center rounded-none rounded-tr-lg px-4 py-3 text-sm font-medium text-orange-600 hover:text-orange-600 focus:z-10 focus:outline-none focus:ring-2 focus:ring-orange-600"
>Tutorial</a
>
</div>
<div class="flex h-0 flex-1">
<a
href="https://github.com/Lexington-Themes/lexington-tutorials/blob/main/src/pages/js-drag-and-drop/index.astro"
class="flex w-full items-center justify-center rounded-none rounded-br-lg px-4 py-3 text-sm font-medium text-neutral-700 hover:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-orange-600"
>Get the code</a
>
</div>
</div>
</div>
</div>
</div>
<!-- Ends links to tutorial -->
</BaseLayout>
<script type="module">
const dragAndDropItems = document.getElementById("movable-items");
new Sortable(dragAndDropItems, {
animation: 350,
chosenClass: "shadow-2xl",
});
</script>