labs_js_drag-and-drop/index.html at main · OrionChar/labs_js_drag-and-drop · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Drag && Drop</title>
    <link href="./style.css" rel="stylesheet">
</head>
<body class="p-10 relative bg-white">
<header class="flex justify-between items-center">
    <h1 class="text-6xl mb-10 font-extrabold">Canban</h1>
    <!-- component -->
    <button class="inline-flex hover:bg-black hover:text-white transition duration-500 ease-in-out" data-role="show-modal">
        <span class="h-12 flex items-center justify-center uppercase font-semibold px-8 border border-black">New Task</span>
        <span class="h-12 w-12 flex-shrink-0 flex items-center justify-center border border-l-0 border-black">
            <svg class="h-3 w-3 svg-inline--fa fa-chevron-right fa-w-8 fa-9x" aria-hidden="true" focusable="false" data-icon="chevron-right" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><path fill="currentColor" d="M24.707 38.101L4.908 57.899c-4.686 4.686-4.686 12.284 0 16.971L185.607 256 4.908 437.13c-4.686 4.686-4.686 12.284 0 16.971L24.707 473.9c4.686 4.686 12.284 4.686 16.971 0l209.414-209.414c4.686-4.686 4.686-12.284 0-16.971L41.678 38.101c-4.687-4.687-12.285-4.687-16.971 0z"/></svg>
        </span>
    </button>
</header>
<dialog class="w-1/2 rounded-3xl backdrop-blur-3xl">
    <form class="p-12">
        <h2 class="text-2xl font-bold">New Task</h2>
        <div class="mt-8">
            <div class="grid grid-cols-1 gap-6">
                <label class="block">
                    <span class="text-gray-700">Full name</span>
                    <input type="text" name="title"
                           class="mt-1 block w-full rounded-md bg-gray-100 border-transparent focus:border-gray-500 focus:bg-white focus:ring-0"
                           placeholder="">
                </label>
                <label class="block">
                    <span class="text-gray-700">Details</span>
                    <textarea name="detail"
                              class="mt-1 block w-full rounded-md bg-gray-100 border-transparent focus:border-gray-500 focus:bg-white focus:ring-0"
                              rows="3"></textarea>
                </label>
                <div class="flex gap-5 justify-self-end">
                    <button type="button" data-role="close-modal"
                            class="w-fit inline-flex items-center px-4 py-2 bg-gray-200 hover:bg-gray-300 text-gray-800 text-sm font-medium rounded-md">
                        <svg class="h-5 w-5 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
                            <!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
                            <path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/>
                        </svg>
                        Cansel
                    </button>
                    <button type="submit"
                            class="w-fit inline-flex items-center px-4 py-2 bg-gray-200 hover:bg-gray-300 text-gray-800 text-sm font-medium rounded-md">
                        <svg class="h-5 w-5 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                            <!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
                            <path d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"/>
                        </svg>
                        Add
                    </button>
                </div>
            </div>
        </div>
    </form>
</dialog>
<main id="kanban" class="grid h-screen gap-10 grid-cols-3 mt-6">
    <div class="kanban-table border bg-white rounded-3xl transition-colors">
        <h2 class="mt-7 my-7 px-7 text-4xl font-semibold">New</h2>
        <div data-kanban-column-name="new" id="kanban-new" class="kanban-tasks-container"></div>
    </div>
    <div  class="kanban-table border bg-white rounded-3xl transition-colors">
        <h2 class="p-7 text-3xl font-semibold">In Progress</h2>
        <div data-kanban-column-name="inProgress" id="kanban-in-progress" class="kanban-tasks-container"></div>
    </div>
    <div class="kanban-table border bg-white rounded-3xl transition-colors">
        <h2 class="p-7 text-3xl font-semibold">Done</h2>
        <div data-kanban-column-name="done" id="kanban-done" class="drop-above kanban-tasks-container"></div>
    </div>
</main>
<template id="task-template">
    <div data-role="task" class="task p-7 mr-14 cursor-grab bg-yellow-100 rounded-tr-3xl rounded-br-3xl">
        <h3 data-role="task-title" class="font-semibold mb-3"></h3>
        <p data-role="task-detail"></p>
    </div>
</template>
<script type="module" src="index.js"></script>
</body>
</html>