├── .browserslistrc
├── .gitignore
├── README.md
├── babel.config.js
├── package.json
├── postcss.config.js
├── public
    ├── demo.gif
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   ├── css
    │   │   └── tailwind.css
    │   └── logo.png
    ├── components
    │   └── UserCard.vue
    └── main.js
└── yarn.lock


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Vue.js and Tailwind draggable list
 2 | Check out the source code or a [detailed article on this topic](https://www.binarcode.com/blog/building-animated-draggable-interfaces-with-vuejs-and-tailwind?ref=github.com)
 3 | ![Demo](https://raw.githubusercontent.com/BinarCode/draggable-list-example/master/public/demo.gif)
 4 | 
 5 | ## Project setup
 6 | ```
 7 | yarn install
 8 | ```
 9 | 
10 | ### Compiles and hot-reloads for development
11 | ```
12 | yarn run serve
13 | ```
14 | 
15 | ### Compiles and minifies for production
16 | ```
17 | yarn run build
18 | ```
19 | 
20 | ### Run your tests
21 | ```
22 | yarn run test
23 | ```
24 | 
25 | ### Lints and fixes files
26 | ```
27 | yarn run lint
28 | ```
29 | 
30 | ### Customize configuration
31 | See [Configuration Reference](https://cli.vuejs.org/config/).
32 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "draggable-list",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build"
 8 |   },
 9 |   "dependencies": {
10 |     "core-js": "^3.3.2",
11 |     "tailwindcss": "^1.1.3",
12 |     "vue": "^2.6.10",
13 |     "vue-feather-icons": "^5.0.0",
14 |     "vuedraggable": "^2.23.2"
15 |   },
16 |   "devDependencies": {
17 |     "@vue/cli-plugin-babel": "^4.0.0",
18 |     "@vue/cli-service": "^4.0.0",
19 |     "node-sass": "^4.12.0",
20 |     "sass-loader": "^8.0.0",
21 |     "vue-template-compiler": "^2.6.10"
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: [
3 |     require('tailwindcss'),
4 |     require('autoprefixer'),
5 |   ]
6 | }
7 | 


--------------------------------------------------------------------------------
/public/demo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BinarCode/draggable-list-example/34467d12470a5fbad67454d306617e7c24e70453/public/demo.gif


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BinarCode/draggable-list-example/34467d12470a5fbad67454d306617e7c24e70453/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>draggable-list</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but draggable-list doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div id="app" class="min-h-screen w-screen bg-gray-200 flex items-center justify-center">
 3 |         <draggable tag="ul"
 4 |                    class="w-full max-w-md"
 5 |                    ghost-class="moving-card"
 6 |                    :list="users"
 7 |                    :animation="200">
 8 |             <user-card v-for="user in users"
 9 |                        :user="user"
10 |                        :key="user.id"
11 |                        @on-edit="onEdit"
12 |                        @on-delete="onDelete">
13 |             </user-card>
14 |         </draggable>
15 |     </div>
16 | </template>
17 | 
18 | <script>
19 |   import Draggable from 'vuedraggable'
20 |   import UserCard from "./components/UserCard";
21 |   export default {
22 |     name: "App",
23 |     components: {
24 |       Draggable,
25 |       UserCard,
26 |     },
27 |     data() {
28 |       return {
29 |         users: [
30 |           {
31 |             id: 1,
32 |             name: "Adrian Schubert",
33 |             avatar: "https://pickaface.net/gallery/avatar/unr_sample_161118_2054_ynlrg.png"
34 |           },
35 |           {
36 |             id: 2,
37 |             name: "Violet Gates",
38 |             avatar: "https://pickaface.net/gallery/avatar/freud51c8b3f65e7dc.png"
39 |           },
40 |           {
41 |             id: 3,
42 |             name: "Steve Jobs",
43 |             avatar: "https://pickaface.net/gallery/avatar/Opi51c74d0125fd4.png"
44 |           },
45 |           {
46 |             id: 4,
47 |             name: "Yassine Smith",
48 |             avatar: "https://pickaface.net/gallery/avatar/unr_yassine_191124_2012_3gngr.png"
49 |           },
50 |           {
51 |             id: 5,
52 |             name: "Senior Saez",
53 |             avatar: "https://pickaface.net/gallery/avatar/elmedinilla541c03412955c.png"
54 |           }
55 |         ]
56 |       }
57 |     },
58 |     methods: {
59 |       onEdit(user) {
60 |         alert(`Editing ${user.name}`);
61 |       },
62 |       onDelete(user) {
63 |         alert(`Deleting ${user.name}`);
64 |       }
65 |     }
66 |   }
67 | </script>
68 | 
69 | <style lang="scss">
70 |     .moving-card {
71 |         @apply opacity-50 bg-gray-100 border border-blue-500;
72 |     }
73 | </style>
74 | 


--------------------------------------------------------------------------------
/src/assets/css/tailwind.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | 
3 | @tailwind components;
4 | 
5 | @tailwind utilities;
6 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BinarCode/draggable-list-example/34467d12470a5fbad67454d306617e7c24e70453/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/UserCard.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <li class="p-4 mb-3 flex justify-between items-center bg-white shadow rounded-lg cursor-move">
 3 |         <div class="flex items-center">
 4 |             <img class="w-10 h-10 rounded-full" :src="user.avatar" :alt="user.name">
 5 |             <p class="ml-2 text-gray-700 font-semibold font-sans tracking-wide">{{user.name}}</p>
 6 |         </div>
 7 |         <div class="flex">
 8 |             <button aria-label="Edit user"
 9 |                     class="p-1 focus:outline-none focus:shadow-outline text-teal-500 hover:text-teal-600"
10 |                     @click="$emit('on-edit', user)">
11 |                 <EditIcon/>
12 |             </button>
13 |             <button aria-label="Delete user"
14 |                     class="p-1 focus:outline-none focus:shadow-outline text-red-500 hover:text-red-600"
15 |                     @click="$emit('on-delete', user)">
16 |                 <Trash2Icon/>
17 |             </button>
18 |         </div>
19 |     </li>
20 | </template>
21 | <script>
22 |   import { EditIcon, Trash2Icon } from "vue-feather-icons";
23 |   export default {
24 |     components: {
25 |       EditIcon,
26 |       Trash2Icon
27 |     },
28 |     props: {
29 |       user: {
30 |         type: Object,
31 |         default: () => ({})
32 |       }
33 |     },
34 |   }
35 | </script>
36 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import './assets/css/tailwind.css'
 2 | import Vue from 'vue'
 3 | import App from './App.vue'
 4 | 
 5 | Vue.config.productionTip = false
 6 | 
 7 | new Vue({
 8 |   render: h => h(App),
 9 | }).$mount('#app')
10 | 


--------------------------------------------------------------------------------