├── .babelrc ├── .editorconfig ├── .eslintrc.yml ├── .gitignore ├── README.md ├── index.html ├── package-lock.json ├── package.json ├── src ├── App.vue ├── DragHtml.vue ├── DragImage.vue ├── DropEffects.vue ├── Files.vue ├── GithubRibbon.vue ├── Groups.vue ├── Lists.vue ├── Minimal.vue ├── Nested.vue ├── Scoped.vue ├── Styling.vue ├── Tags.vue ├── assets │ └── drag.png └── main.js └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { "modules": false }] 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = tab 5 | indent_size = 2 6 | -------------------------------------------------------------------------------- /.eslintrc.yml: -------------------------------------------------------------------------------- 1 | root: true 2 | parser: babel-eslint 3 | parserOptions: 4 | sourceType: module 5 | extends: eslint-config-genius 6 | plugins: 7 | - html 8 | env: 9 | browser: true 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log 5 | yarn-error.log 6 | 7 | # Editor directories and files 8 | .idea 9 | *.suo 10 | *.ntvs* 11 | *.njsproj 12 | *.sln 13 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-drag-drop-demo 2 | 3 | > A suite of demos for VueDragDrop 4 | 5 | [Live Demo](https://cameronhimself.github.io/vue-drag-drop/) 6 | 7 | ## Build Setup 8 | 9 | ``` bash 10 | # install dependencies 11 | npm install 12 | 13 | # serve with hot reload at localhost:8080 14 | npm run dev 15 | 16 | # build for production with minification 17 | npm run build 18 | ``` 19 | 20 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). 21 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | vue-drag-drop-demo 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-drag-drop-demo", 3 | "description": "A suite of demos for VueDragDrop", 4 | "version": "1.0.0", 5 | "author": { 6 | "name": "J. Cameron McDonald", 7 | "email": "cameronhimself@gmail.com" 8 | }, 9 | "private": true, 10 | "scripts": { 11 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 12 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 13 | }, 14 | "dependencies": { 15 | "vue": "^2.3.3", 16 | "vue-drag-drop": "^1.1.4" 17 | }, 18 | "devDependencies": { 19 | "babel-core": "^6.0.0", 20 | "babel-eslint": "^7.2.3", 21 | "babel-loader": "^6.0.0", 22 | "babel-preset-env": "^1.5.1", 23 | "cross-env": "^3.0.0", 24 | "css-loader": "^0.25.0", 25 | "eslint": "^4.6.0", 26 | "eslint-config-genius": "^0.1.4", 27 | "eslint-plugin-html": "^3.2.1", 28 | "file-loader": "^0.9.0", 29 | "html-webpack-plugin": "^2.30.1", 30 | "html-webpack-template": "^5.6.0", 31 | "node-sass": "^4.5.0", 32 | "sass-loader": "^5.0.1", 33 | "vue-loader": "^12.1.0", 34 | "vue-template-compiler": "^2.3.3", 35 | "webpack": "^2.6.1", 36 | "webpack-dev-server": "^2.4.5" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 60 | 61 | 79 | 80 | 125 | -------------------------------------------------------------------------------- /src/DragHtml.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 29 | 30 | 35 | -------------------------------------------------------------------------------- /src/DragImage.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 24 | -------------------------------------------------------------------------------- /src/DropEffects.vue: -------------------------------------------------------------------------------- 1 | 36 | 37 | 53 | 54 | 60 | -------------------------------------------------------------------------------- /src/Files.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 25 | -------------------------------------------------------------------------------- /src/GithubRibbon.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /src/Groups.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 47 | 48 | 56 | -------------------------------------------------------------------------------- /src/Lists.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 42 | 43 | 62 | -------------------------------------------------------------------------------- /src/Minimal.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 20 | -------------------------------------------------------------------------------- /src/Nested.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 36 | 37 | 52 | -------------------------------------------------------------------------------- /src/Scoped.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 39 | 40 | 52 | -------------------------------------------------------------------------------- /src/Styling.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 30 | 31 | 37 | -------------------------------------------------------------------------------- /src/Tags.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 31 | 32 | 38 | -------------------------------------------------------------------------------- /src/assets/drag.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cameronhimself/vue-drag-drop-demo/d5326df68db4a1569aa57b607dba1c45ad475202/src/assets/drag.png -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | 4 | new Vue({ 5 | el: '#app', 6 | render: h => h(App), 7 | }); 8 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | /* eslint-env node */ 2 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 3 | const path = require('path'); 4 | const webpack = require('webpack'); 5 | 6 | module.exports = { 7 | entry: './src/main.js', 8 | target: 'web', 9 | output: { 10 | path: path.resolve(__dirname, './dist'), 11 | publicPath: '', 12 | filename: 'build.js', 13 | }, 14 | module: { 15 | rules: [ 16 | { 17 | test: /\.vue$/, 18 | loader: 'vue-loader', 19 | options: { 20 | loaders: { 21 | // Since sass-loader (weirdly) has SCSS as its default parse mode, we map 22 | // the "scss" and "sass" values for the lang attribute to the right configs here. 23 | // other preprocessors should work out of the box, no loader config like this necessary. 24 | 'scss': 'vue-style-loader!css-loader!sass-loader', 25 | 'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax', 26 | }, 27 | }, 28 | }, 29 | { 30 | test: /\.js$/, 31 | loader: 'babel-loader', 32 | exclude: /node_modules/, 33 | }, 34 | { 35 | test: /\.(png|jpg|gif|svg)$/, 36 | loader: 'file-loader', 37 | options: { 38 | name: '[name].[ext]?[hash]', 39 | }, 40 | }, 41 | ], 42 | }, 43 | resolve: { 44 | alias: { 45 | 'vue$': 'vue/dist/vue.esm.js', 46 | }, 47 | }, 48 | devServer: { 49 | historyApiFallback: true, 50 | noInfo: true, 51 | }, 52 | performance: { 53 | hints: false, 54 | }, 55 | devtool: '#eval-source-map', 56 | plugins: [ 57 | new HtmlWebpackPlugin({ 58 | title: 'VueDragDrop Demo', 59 | inject: false, 60 | template: require('html-webpack-template'), 61 | appMountId: 'app', 62 | }), 63 | ], 64 | }; 65 | 66 | if (process.env.NODE_ENV === 'production') { 67 | module.exports.devtool = '#source-map'; 68 | // http://vue-loader.vuejs.org/en/workflow/production.html 69 | module.exports.plugins = (module.exports.plugins || []).concat([ 70 | new webpack.DefinePlugin({ 71 | 'process.env': { 72 | NODE_ENV: '"production"', 73 | }, 74 | }), 75 | new webpack.optimize.UglifyJsPlugin({ 76 | sourceMap: true, 77 | compress: { 78 | warnings: false, 79 | }, 80 | }), 81 | new webpack.LoaderOptionsPlugin({ 82 | minimize: true, 83 | }), 84 | ]); 85 | } 86 | --------------------------------------------------------------------------------