├── .gitignore
├── .prettierrc
├── LICENSE
├── README.md
├── index.html
├── package.json
├── postcss.config.js
├── public
└── vite.svg
├── src
├── drag-preview.ts
├── main.css
├── main.ts
└── vite-env.d.ts
├── tailwind.config.js
├── tsconfig.json
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "trailingComma": "all",
3 | "semi": true,
4 | "tabWidth": 2,
5 | "useTabs": false,
6 | "singleQuote": true,
7 | "printWidth": 100
8 | }
9 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2024 Alexander Reardon
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | A simple reorderable list example with:
2 |
3 | - [Pragmatic drag drag and drop](https://github.com/atlassian/pragmatic-drag-and-drop)
4 | - [TailwindCSS](https://tailwindcss.com/)
5 | - [TypeScript](https://www.typescriptlang.org/) (but could easily have no TypeScript!)
6 | - All state is kept in the DOM
7 |
8 | This project is powered by [Vite](https://vitejs.dev/)
9 |
10 | ## Run remotely
11 |
12 | → [Run on StackBlitz](https://stackblitz.com/github/alexreardon/pdnd-vanilla-tailwind?startScript=dev)
13 |
14 | ## Run locally
15 |
16 | ```bash
17 | # Install dependencies
18 | yarn install
19 |
20 | # Start dev server
21 | yarn run dev
22 | ```
23 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Vite + TS
9 |
10 |
11 |