├── .gitignore ├── README.md ├── babel.config.js ├── docs ├── 448c34a56d699c29117adc64c43affeb.woff2 ├── 674f50d287a8c48dc19ba404d20fe713.eot ├── 6819dcc86976121ce91ebfdff0f98b4f.png ├── af7ae505a9eed503f8b8e6982036873e.woff2 ├── app-legacy.js ├── app.js ├── b06871f281fee6b241d60582ae9369b9.ttf ├── e18bbf611f2a2e43afc071aa2f4e1512.ttf ├── f4769f9bdb7466be65088239c12046d1.eot ├── fa2772327f55d8198301fdb8bcfc8158.woff ├── favicon.ico ├── fee66e712a8a08eef5805a46892932ad.woff ├── img │ ├── fontawesome-webfont.912ec66d.svg │ └── glyphicons-halflings-regular.89889688.svg └── index.html ├── example.gif ├── package-lock.json ├── package.json ├── public ├── favicon.ico └── index.html ├── src ├── App.vue ├── assets │ └── logo.png ├── components │ └── Hello.vue └── main.js ├── tests └── unit │ ├── .eslintrc.js │ └── HelloWorld.spec.js └── vue.config.js /.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 | # draggable-example 2 | 3 | > Example usage of [vue.draggable](https://github.com/SortableJS/Vue.Draggable) 4 | 5 | ![demo gif](example.gif) 6 | 7 | ## Live demo 8 | 9 | https://david-desmaisons.github.io/draggable-example/ 10 | 11 | ## Build Setup 12 | 13 | ``` bash 14 | # install dependencies 15 | npm install 16 | 17 | # serve with hot reload at localhost:8080 18 | npm run serve 19 | 20 | # build for production with minification 21 | npm run build 22 | ``` 23 | 24 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ["@vue/app"] 3 | }; 4 | -------------------------------------------------------------------------------- /docs/448c34a56d699c29117adc64c43affeb.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/David-Desmaisons/draggable-example/281692be04c945bdf1ed321d3a8fdf146e5ea623/docs/448c34a56d699c29117adc64c43affeb.woff2 -------------------------------------------------------------------------------- /docs/674f50d287a8c48dc19ba404d20fe713.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/David-Desmaisons/draggable-example/281692be04c945bdf1ed321d3a8fdf146e5ea623/docs/674f50d287a8c48dc19ba404d20fe713.eot -------------------------------------------------------------------------------- /docs/6819dcc86976121ce91ebfdff0f98b4f.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/David-Desmaisons/draggable-example/281692be04c945bdf1ed321d3a8fdf146e5ea623/docs/6819dcc86976121ce91ebfdff0f98b4f.png -------------------------------------------------------------------------------- /docs/af7ae505a9eed503f8b8e6982036873e.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/David-Desmaisons/draggable-example/281692be04c945bdf1ed321d3a8fdf146e5ea623/docs/af7ae505a9eed503f8b8e6982036873e.woff2 -------------------------------------------------------------------------------- /docs/b06871f281fee6b241d60582ae9369b9.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/David-Desmaisons/draggable-example/281692be04c945bdf1ed321d3a8fdf146e5ea623/docs/b06871f281fee6b241d60582ae9369b9.ttf -------------------------------------------------------------------------------- /docs/e18bbf611f2a2e43afc071aa2f4e1512.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/David-Desmaisons/draggable-example/281692be04c945bdf1ed321d3a8fdf146e5ea623/docs/e18bbf611f2a2e43afc071aa2f4e1512.ttf -------------------------------------------------------------------------------- /docs/f4769f9bdb7466be65088239c12046d1.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/David-Desmaisons/draggable-example/281692be04c945bdf1ed321d3a8fdf146e5ea623/docs/f4769f9bdb7466be65088239c12046d1.eot -------------------------------------------------------------------------------- /docs/fa2772327f55d8198301fdb8bcfc8158.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/David-Desmaisons/draggable-example/281692be04c945bdf1ed321d3a8fdf146e5ea623/docs/fa2772327f55d8198301fdb8bcfc8158.woff -------------------------------------------------------------------------------- /docs/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/David-Desmaisons/draggable-example/281692be04c945bdf1ed321d3a8fdf146e5ea623/docs/favicon.ico -------------------------------------------------------------------------------- /docs/fee66e712a8a08eef5805a46892932ad.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/David-Desmaisons/draggable-example/281692be04c945bdf1ed321d3a8fdf146e5ea623/docs/fee66e712a8a08eef5805a46892932ad.woff -------------------------------------------------------------------------------- /docs/img/glyphicons-halflings-regular.89889688.svg: -------------------------------------------------------------------------------- 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 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | 288 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | draggable-example 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /example.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/David-Desmaisons/draggable-example/281692be04c945bdf1ed321d3a8fdf146e5ea623/example.gif -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "draggable-example", 3 | "version": "0.1.0", 4 | "private": true, 5 | "description": "A Vue.js project", 6 | "author": "desmaisons_david ", 7 | "license": "MIT", 8 | "scripts": { 9 | "serve": "vue-cli-service serve --open", 10 | "build": "vue-cli-service build --dest docs --mode dev --modern", 11 | "lint": "vue-cli-service lint", 12 | "test:unit": "vue-cli-service test:unit" 13 | }, 14 | "dependencies": { 15 | "bootstrap": "^3.3.7", 16 | "font-awesome": "^4.7.0", 17 | "vue": "^2.5.17", 18 | "vuedraggable": "^2.23.1" 19 | }, 20 | "devDependencies": { 21 | "@vue/cli-plugin-babel": "^3.0.0", 22 | "@vue/cli-plugin-eslint": "^3.0.0", 23 | "@vue/cli-plugin-unit-jest": "^3.0.0", 24 | "@vue/cli-service": "^3.0.0", 25 | "@vue/eslint-config-prettier": "^3.0.0", 26 | "@vue/test-utils": "^1.0.0-beta.20", 27 | "babel-core": "7.0.0-bridge.0", 28 | "babel-jest": "^23.0.1", 29 | "less": "^3.0.4", 30 | "less-loader": "^4.1.0", 31 | "vue-template-compiler": "^2.5.17" 32 | }, 33 | "eslintConfig": { 34 | "root": true, 35 | "env": { 36 | "node": true 37 | }, 38 | "extends": [ 39 | "plugin:vue/essential", 40 | "@vue/prettier" 41 | ], 42 | "rules": {}, 43 | "parserOptions": { 44 | "parser": "babel-eslint" 45 | } 46 | }, 47 | "postcss": { 48 | "plugins": { 49 | "autoprefixer": {} 50 | } 51 | }, 52 | "browserslist": [ 53 | "> 1%", 54 | "last 2 versions", 55 | "not ie <= 8" 56 | ], 57 | "jest": { 58 | "moduleFileExtensions": [ 59 | "js", 60 | "jsx", 61 | "json", 62 | "vue" 63 | ], 64 | "transform": { 65 | "^.+\\.vue$": "vue-jest", 66 | ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub", 67 | "^.+\\.jsx?$": "babel-jest" 68 | }, 69 | "moduleNameMapper": { 70 | "^@/(.*)$": "/src/$1" 71 | }, 72 | "snapshotSerializers": [ 73 | "jest-serializer-vue" 74 | ], 75 | "testMatch": [ 76 | "**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)" 77 | ], 78 | "testURL": "http://localhost/" 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/David-Desmaisons/draggable-example/281692be04c945bdf1ed321d3a8fdf146e5ea623/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | draggable-example 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 31 | 32 | 44 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/David-Desmaisons/draggable-example/281692be04c945bdf1ed321d3a8fdf146e5ea623/src/assets/logo.png -------------------------------------------------------------------------------- /src/components/Hello.vue: -------------------------------------------------------------------------------- 1 | 47 | 48 | 120 | 121 | 147 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import App from "./App.vue"; 3 | import "bootstrap/dist/css/bootstrap.css"; 4 | import "font-awesome/less/font-awesome.less"; 5 | 6 | Vue.config.productionTip = false; 7 | 8 | new Vue({ 9 | render: h => h(App) 10 | }).$mount("#app"); 11 | -------------------------------------------------------------------------------- /tests/unit/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | jest: true 4 | }, 5 | rules: { 6 | 'import/no-extraneous-dependencies': 'off' 7 | } 8 | } -------------------------------------------------------------------------------- /tests/unit/HelloWorld.spec.js: -------------------------------------------------------------------------------- 1 | import { shallowMount } from "@vue/test-utils"; 2 | import HelloWorld from "@/components/HelloWorld.vue"; 3 | 4 | describe("HelloWorld.vue", () => { 5 | it("renders props.msg when passed", () => { 6 | const msg = "new message"; 7 | const wrapper = shallowMount(HelloWorld, { 8 | propsData: { msg } 9 | }); 10 | expect(wrapper.text()).toMatch(msg); 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | baseUrl: "./" 3 | }; 4 | --------------------------------------------------------------------------------