├── .babelrc ├── .editorconfig ├── .gitignore ├── LICENSE ├── README.md ├── build ├── build.js ├── check-versions.js ├── dev-client.js ├── dev-server.js ├── utils.js ├── vue-loader.conf.js ├── webpack.base.conf.js ├── webpack.dev.conf.js └── webpack.prod.conf.js ├── config ├── dev.env.js ├── index.js └── prod.env.js ├── debug.log ├── docs ├── index.html └── static │ ├── css │ ├── app.adbcc170c68406fdb405040ea9cb125f.css │ ├── app.adbcc170c68406fdb405040ea9cb125f.css.map │ └── reset.css │ └── js │ ├── app.4ec2f887e7545730f097.js │ ├── app.4ec2f887e7545730f097.js.map │ ├── manifest.724539638ec662d7c1bd.js │ ├── manifest.724539638ec662d7c1bd.js.map │ ├── vendor.ad0126597edaa568edb3.js │ └── vendor.ad0126597edaa568edb3.js.map ├── index.html ├── index.js ├── package.json ├── src ├── App.vue ├── components │ └── Hello.vue ├── main.js └── vue-dragdrag │ └── vue-dragdrag.js ├── static ├── .gitkeep └── css │ └── reset.css └── vue-cli-README.md /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["es2015", { "modules": false }], 4 | "stage-2" 5 | ], 6 | "plugins": ["transform-runtime"], 7 | "comments": false, 8 | "env": { 9 | "test": { 10 | "plugins": [ "istanbul" ] 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log 5 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 lfyfly 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 | # vue-dragdrag 2 | vue2 拖拽指令。 vue2 drag directive. 3 | 4 | ## [文档和实例](http://lfyfly.gitee.io/vue-dragdrag/docs) 5 | [document](http://lfyfly.gitee.io/vue-dragdrag/docs) 6 | 7 | [vue-dragdrag github](https://github.com/lfyfly/vue-dragdrag) 8 | -------------------------------------------------------------------------------- /build/build.js: -------------------------------------------------------------------------------- 1 | // https://github.com/shelljs/shelljs 2 | require('./check-versions')() 3 | 4 | process.env.NODE_ENV = 'production' 5 | 6 | var ora = require('ora') 7 | var path = require('path') 8 | var chalk = require('chalk') 9 | var shell = require('shelljs') 10 | var webpack = require('webpack') 11 | var config = require('../config') 12 | var webpackConfig = require('./webpack.prod.conf') 13 | 14 | var spinner = ora('building for production...') 15 | spinner.start() 16 | 17 | var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory) 18 | shell.rm('-rf', assetsPath) 19 | shell.mkdir('-p', assetsPath) 20 | shell.config.silent = true 21 | shell.cp('-R', 'static/*', assetsPath) 22 | shell.config.silent = false 23 | 24 | webpack(webpackConfig, function (err, stats) { 25 | spinner.stop() 26 | if (err) throw err 27 | process.stdout.write(stats.toString({ 28 | colors: true, 29 | modules: false, 30 | children: false, 31 | chunks: false, 32 | chunkModules: false 33 | }) + '\n\n') 34 | 35 | console.log(chalk.cyan(' Build complete.\n')) 36 | console.log(chalk.yellow( 37 | ' Tip: built files are meant to be served over an HTTP server.\n' + 38 | ' Opening index.html over file:// won\'t work.\n' 39 | )) 40 | }) 41 | -------------------------------------------------------------------------------- /build/check-versions.js: -------------------------------------------------------------------------------- 1 | var chalk = require('chalk') 2 | var semver = require('semver') 3 | var packageConfig = require('../package.json') 4 | 5 | function exec (cmd) { 6 | return require('child_process').execSync(cmd).toString().trim() 7 | } 8 | 9 | var versionRequirements = [ 10 | { 11 | name: 'node', 12 | currentVersion: semver.clean(process.version), 13 | versionRequirement: packageConfig.engines.node 14 | }, 15 | { 16 | name: 'npm', 17 | currentVersion: exec('npm --version'), 18 | versionRequirement: packageConfig.engines.npm 19 | } 20 | ] 21 | 22 | module.exports = function () { 23 | var warnings = [] 24 | for (var i = 0; i < versionRequirements.length; i++) { 25 | var mod = versionRequirements[i] 26 | if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) { 27 | warnings.push(mod.name + ': ' + 28 | chalk.red(mod.currentVersion) + ' should be ' + 29 | chalk.green(mod.versionRequirement) 30 | ) 31 | } 32 | } 33 | 34 | if (warnings.length) { 35 | console.log('') 36 | console.log(chalk.yellow('To use this template, you must update following to modules:')) 37 | console.log() 38 | for (var i = 0; i < warnings.length; i++) { 39 | var warning = warnings[i] 40 | console.log(' ' + warning) 41 | } 42 | console.log() 43 | process.exit(1) 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /build/dev-client.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | require('eventsource-polyfill') 3 | var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true') 4 | 5 | hotClient.subscribe(function (event) { 6 | if (event.action === 'reload') { 7 | window.location.reload() 8 | } 9 | }) 10 | -------------------------------------------------------------------------------- /build/dev-server.js: -------------------------------------------------------------------------------- 1 | require('./check-versions')() 2 | 3 | var config = require('../config') 4 | if (!process.env.NODE_ENV) { 5 | process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV) 6 | } 7 | 8 | var opn = require('opn') 9 | var path = require('path') 10 | var express = require('express') 11 | var webpack = require('webpack') 12 | var proxyMiddleware = require('http-proxy-middleware') 13 | var webpackConfig = require('./webpack.dev.conf') 14 | 15 | // default port where dev server listens for incoming traffic 16 | var port = process.env.PORT || config.dev.port 17 | // automatically open browser, if not set will be false 18 | var autoOpenBrowser = !!config.dev.autoOpenBrowser 19 | // Define HTTP proxies to your custom API backend 20 | // https://github.com/chimurai/http-proxy-middleware 21 | var proxyTable = config.dev.proxyTable 22 | 23 | var app = express() 24 | var compiler = webpack(webpackConfig) 25 | 26 | var devMiddleware = require('webpack-dev-middleware')(compiler, { 27 | publicPath: webpackConfig.output.publicPath, 28 | quiet: true 29 | }) 30 | 31 | var hotMiddleware = require('webpack-hot-middleware')(compiler, { 32 | log: () => {} 33 | }) 34 | // force page reload when html-webpack-plugin template changes 35 | compiler.plugin('compilation', function (compilation) { 36 | compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) { 37 | hotMiddleware.publish({ action: 'reload' }) 38 | cb() 39 | }) 40 | }) 41 | 42 | // proxy api requests 43 | Object.keys(proxyTable).forEach(function (context) { 44 | var options = proxyTable[context] 45 | if (typeof options === 'string') { 46 | options = { target: options } 47 | } 48 | app.use(proxyMiddleware(options.filter || context, options)) 49 | }) 50 | 51 | // handle fallback for HTML5 history API 52 | app.use(require('connect-history-api-fallback')()) 53 | 54 | // serve webpack bundle output 55 | app.use(devMiddleware) 56 | 57 | // enable hot-reload and state-preserving 58 | // compilation error display 59 | app.use(hotMiddleware) 60 | 61 | // serve pure static assets 62 | var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory) 63 | app.use(staticPath, express.static('./static')) 64 | 65 | var uri = 'http://localhost:' + port 66 | 67 | devMiddleware.waitUntilValid(function () { 68 | console.log('> Listening at ' + uri + '\n') 69 | }) 70 | 71 | module.exports = app.listen(port, function (err) { 72 | if (err) { 73 | console.log(err) 74 | return 75 | } 76 | 77 | // when env is testing, don't need open it 78 | if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') { 79 | opn(uri) 80 | } 81 | }) 82 | -------------------------------------------------------------------------------- /build/utils.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var config = require('../config') 3 | var ExtractTextPlugin = require('extract-text-webpack-plugin') 4 | 5 | exports.assetsPath = function (_path) { 6 | var assetsSubDirectory = process.env.NODE_ENV === 'production' 7 | ? config.build.assetsSubDirectory 8 | : config.dev.assetsSubDirectory 9 | return path.posix.join(assetsSubDirectory, _path) 10 | } 11 | 12 | exports.cssLoaders = function (options) { 13 | options = options || {} 14 | var isProduction = process.env.NODE_ENV === 'production' 15 | var cssLoader = 'css' + (isProduction ? '?minimize' : '') 16 | 17 | // generate loader string to be used with extract text plugin 18 | function generateLoaders (loader) { 19 | var loaders = [cssLoader] 20 | if (loader) loaders.push(loader) 21 | var sourceLoader = loaders.map(function (loader) { 22 | var extraParamChar 23 | if (/\?/.test(loader)) { 24 | loader = loader.replace(/\?/, '-loader?') 25 | extraParamChar = '&' 26 | } else { 27 | loader = loader + '-loader' 28 | extraParamChar = '?' 29 | } 30 | return loader + (options.sourceMap ? extraParamChar + 'sourceMap' : '') 31 | }) 32 | 33 | // Extract CSS when that option is specified 34 | // (which is the case during production build) 35 | if (options.extract) { 36 | return ExtractTextPlugin.extract({ 37 | use: sourceLoader, 38 | fallback: 'vue-style-loader' 39 | }) 40 | } else { 41 | return ['vue-style-loader'].concat(sourceLoader) 42 | } 43 | } 44 | 45 | // http://vuejs.github.io/vue-loader/en/configurations/extract-css.html 46 | return { 47 | css: generateLoaders(), 48 | postcss: generateLoaders(), 49 | less: generateLoaders('less'), 50 | sass: generateLoaders('sass?indentedSyntax'), 51 | scss: generateLoaders('sass'), 52 | stylus: generateLoaders('stylus'), 53 | styl: generateLoaders('stylus') 54 | } 55 | } 56 | 57 | // Generate loaders for standalone style files (outside of .vue) 58 | exports.styleLoaders = function (options) { 59 | var output = [] 60 | var loaders = exports.cssLoaders(options) 61 | for (var extension in loaders) { 62 | var loader = loaders[extension] 63 | output.push({ 64 | test: new RegExp('\\.' + extension + '$'), 65 | loader: loader 66 | }) 67 | } 68 | return output 69 | } 70 | -------------------------------------------------------------------------------- /build/vue-loader.conf.js: -------------------------------------------------------------------------------- 1 | var utils = require('./utils') 2 | var config = require('../config') 3 | var isProduction = process.env.NODE_ENV === 'production' 4 | 5 | module.exports = { 6 | loaders: utils.cssLoaders({ 7 | sourceMap: isProduction 8 | ? config.build.productionSourceMap 9 | : config.dev.cssSourceMap, 10 | extract: isProduction 11 | }), 12 | postcss: [ 13 | require('autoprefixer')({ 14 | browsers: ['last 2 versions'] 15 | }) 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /build/webpack.base.conf.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var utils = require('./utils') 3 | var config = require('../config') 4 | var vueLoaderConfig = require('./vue-loader.conf') 5 | 6 | function resolve (dir) { 7 | return path.join(__dirname, '..', dir) 8 | } 9 | 10 | module.exports = { 11 | entry: { 12 | app: './src/main.js' 13 | }, 14 | output: { 15 | path: config.build.assetsRoot, 16 | filename: '[name].js', 17 | publicPath: process.env.NODE_ENV === 'production' 18 | ? config.build.assetsPublicPath 19 | : config.dev.assetsPublicPath 20 | }, 21 | resolve: { 22 | extensions: ['.js', '.vue', '.json'], 23 | modules: [ 24 | resolve('src'), 25 | resolve('node_modules') 26 | ], 27 | alias: { 28 | 'vue$': 'vue/dist/vue.common.js', 29 | 'src': resolve('src'), 30 | 'assets': resolve('src/assets'), 31 | 'components': resolve('src/components') 32 | } 33 | }, 34 | module: { 35 | rules: [ 36 | { 37 | test: /\.vue$/, 38 | loader: 'vue-loader', 39 | options: vueLoaderConfig 40 | }, 41 | { 42 | test: /\.js$/, 43 | loader: 'babel-loader', 44 | include: [resolve('src'), resolve('test')] 45 | }, 46 | { 47 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 48 | loader: 'url-loader', 49 | query: { 50 | limit: 10000, 51 | name: utils.assetsPath('img/[name].[hash:7].[ext]') 52 | } 53 | }, 54 | { 55 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 56 | loader: 'url-loader', 57 | query: { 58 | limit: 10000, 59 | name: utils.assetsPath('fonts/[name].[hash:7].[ext]') 60 | } 61 | } 62 | ] 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /build/webpack.dev.conf.js: -------------------------------------------------------------------------------- 1 | var utils = require('./utils') 2 | var webpack = require('webpack') 3 | var config = require('../config') 4 | var merge = require('webpack-merge') 5 | var baseWebpackConfig = require('./webpack.base.conf') 6 | var HtmlWebpackPlugin = require('html-webpack-plugin') 7 | var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') 8 | 9 | // add hot-reload related code to entry chunks 10 | Object.keys(baseWebpackConfig.entry).forEach(function (name) { 11 | baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name]) 12 | }) 13 | 14 | module.exports = merge(baseWebpackConfig, { 15 | module: { 16 | rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap }) 17 | }, 18 | // cheap-module-eval-source-map is faster for development 19 | devtool: '#cheap-module-eval-source-map', 20 | plugins: [ 21 | new webpack.DefinePlugin({ 22 | 'process.env': config.dev.env 23 | }), 24 | // https://github.com/glenjamin/webpack-hot-middleware#installation--usage 25 | new webpack.HotModuleReplacementPlugin(), 26 | new webpack.NoEmitOnErrorsPlugin(), 27 | // https://github.com/ampedandwired/html-webpack-plugin 28 | new HtmlWebpackPlugin({ 29 | filename: 'index.html', 30 | template: 'index.html', 31 | inject: true 32 | }), 33 | new FriendlyErrorsPlugin() 34 | ] 35 | }) 36 | -------------------------------------------------------------------------------- /build/webpack.prod.conf.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var utils = require('./utils') 3 | var webpack = require('webpack') 4 | var config = require('../config') 5 | var merge = require('webpack-merge') 6 | var baseWebpackConfig = require('./webpack.base.conf') 7 | var HtmlWebpackPlugin = require('html-webpack-plugin') 8 | var ExtractTextPlugin = require('extract-text-webpack-plugin') 9 | var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin') 10 | 11 | var env = config.build.env 12 | 13 | var webpackConfig = merge(baseWebpackConfig, { 14 | module: { 15 | rules: utils.styleLoaders({ 16 | sourceMap: config.build.productionSourceMap, 17 | extract: true 18 | }) 19 | }, 20 | devtool: config.build.productionSourceMap ? '#source-map' : false, 21 | output: { 22 | path: config.build.assetsRoot, 23 | filename: utils.assetsPath('js/[name].[chunkhash].js'), 24 | chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') 25 | }, 26 | plugins: [ 27 | // http://vuejs.github.io/vue-loader/en/workflow/production.html 28 | new webpack.DefinePlugin({ 29 | 'process.env': env 30 | }), 31 | new webpack.optimize.UglifyJsPlugin({ 32 | compress: { 33 | warnings: false 34 | }, 35 | sourceMap: true 36 | }), 37 | // extract css into its own file 38 | new ExtractTextPlugin({ 39 | filename: utils.assetsPath('css/[name].[contenthash].css') 40 | }), 41 | // Compress extracted CSS. We are using this plugin so that possible 42 | // duplicated CSS from different components can be deduped. 43 | new OptimizeCSSPlugin(), 44 | // generate dist index.html with correct asset hash for caching. 45 | // you can customize output by editing /index.html 46 | // see https://github.com/ampedandwired/html-webpack-plugin 47 | new HtmlWebpackPlugin({ 48 | filename: config.build.index, 49 | template: 'index.html', 50 | inject: true, 51 | minify: { 52 | removeComments: true, 53 | collapseWhitespace: true, 54 | removeAttributeQuotes: true 55 | // more options: 56 | // https://github.com/kangax/html-minifier#options-quick-reference 57 | }, 58 | // necessary to consistently work with multiple chunks via CommonsChunkPlugin 59 | chunksSortMode: 'dependency' 60 | }), 61 | // split vendor js into its own file 62 | new webpack.optimize.CommonsChunkPlugin({ 63 | name: 'vendor', 64 | minChunks: function (module, count) { 65 | // any required modules inside node_modules are extracted to vendor 66 | return ( 67 | module.resource && 68 | /\.js$/.test(module.resource) && 69 | module.resource.indexOf( 70 | path.join(__dirname, '../node_modules') 71 | ) === 0 72 | ) 73 | } 74 | }), 75 | // extract webpack runtime and module manifest to its own file in order to 76 | // prevent vendor hash from being updated whenever app bundle is updated 77 | new webpack.optimize.CommonsChunkPlugin({ 78 | name: 'manifest', 79 | chunks: ['vendor'] 80 | }) 81 | ] 82 | }) 83 | 84 | if (config.build.productionGzip) { 85 | var CompressionWebpackPlugin = require('compression-webpack-plugin') 86 | 87 | webpackConfig.plugins.push( 88 | new CompressionWebpackPlugin({ 89 | asset: '[path].gz[query]', 90 | algorithm: 'gzip', 91 | test: new RegExp( 92 | '\\.(' + 93 | config.build.productionGzipExtensions.join('|') + 94 | ')$' 95 | ), 96 | threshold: 10240, 97 | minRatio: 0.8 98 | }) 99 | ) 100 | } 101 | 102 | if (config.build.bundleAnalyzerReport) { 103 | var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin 104 | webpackConfig.plugins.push(new BundleAnalyzerPlugin()) 105 | } 106 | 107 | module.exports = webpackConfig 108 | -------------------------------------------------------------------------------- /config/dev.env.js: -------------------------------------------------------------------------------- 1 | var merge = require('webpack-merge') 2 | var prodEnv = require('./prod.env') 3 | 4 | module.exports = merge(prodEnv, { 5 | NODE_ENV: '"development"' 6 | }) 7 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | // see http://vuejs-templates.github.io/webpack for documentation. 2 | var path = require('path') 3 | 4 | module.exports = { 5 | build: { 6 | env: require('./prod.env'), 7 | index: path.resolve(__dirname, '../dist/index.html'), 8 | assetsRoot: path.resolve(__dirname, '../dist'), 9 | assetsSubDirectory: 'static', 10 | assetsPublicPath: './', 11 | productionSourceMap: true, 12 | // Gzip off by default as many popular static hosts such as 13 | // Surge or Netlify already gzip all static assets for you. 14 | // Before setting to `true`, make sure to: 15 | // npm install --save-dev compression-webpack-plugin 16 | productionGzip: false, 17 | productionGzipExtensions: ['js', 'css'], 18 | // Run the build command with an extra argument to 19 | // View the bundle analyzer report after build finishes: 20 | // `npm run build --report` 21 | // Set to `true` or `false` to always turn it on or off 22 | bundleAnalyzerReport: process.env.npm_config_report 23 | }, 24 | dev: { 25 | env: require('./dev.env'), 26 | port: 8080, 27 | autoOpenBrowser: true, 28 | assetsSubDirectory: 'static', 29 | assetsPublicPath: '/', 30 | proxyTable: {}, 31 | // CSS Sourcemaps off by default because relative paths are "buggy" 32 | // with this option, according to the CSS-Loader README 33 | // (https://github.com/webpack/css-loader#sourcemaps) 34 | // In our experience, they generally work as expected, 35 | // just be aware of this issue when enabling this option. 36 | cssSourceMap: false 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | NODE_ENV: '"production"' 3 | } 4 | -------------------------------------------------------------------------------- /debug.log: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lfyfly/vue-dragdrag/62dd2d2d6867bd678b2a7cf457d17ba665c91ac9/debug.log -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | vue_origin
-------------------------------------------------------------------------------- /docs/static/css/app.adbcc170c68406fdb405040ea9cb125f.css: -------------------------------------------------------------------------------- 1 | #app{width:800px;margin:0 auto}#app .container{border:1px solid;margin:20px;height:400px;text-align:center}#app .test1{width:100px;height:100px;line-height:100px;border:1px solid red;text-align:center}#app .test2,#app .test3{width:160px;height:50px;border:1px solid blue;text-align:center;line-height:50px}#app .test3{border:1px solid green}#app .test4{font-size:12px;width:260px;height:260px;border:1px solid #ccc;text-align:center;line-height:50px;color:#fff}#app .test4 .test4-drag{width:100%;height:50px;line-height:50px;background:#000;opacity:.5}#app .test4 .test4-content{font-size:40px;line-height:210px;height:210px;text-align:center;color:#000;width:100%}#app .test5{background:#ccc;height:140px;width:350px;line-height:140px}#app .test5,#app .test6{text-align:center;opacity:.7}#app .test6{width:400px;height:50px;line-height:50px;background:#ff0}h1[data-v-044b7e34]{color:red} -------------------------------------------------------------------------------- /docs/static/css/app.adbcc170c68406fdb405040ea9cb125f.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///webpack:///src/App.vue","webpack:///webpack:///src/components/Hello.vue"],"names":[],"mappings":"AACA,KACE,YACA,aAAe,CAEjB,gBACI,iBACA,YACA,aACA,iBAAmB,CAEvB,YACI,YACA,aACA,kBACA,qBACA,iBAAmB,CAEvB,wBAEI,YACA,YACA,sBACA,kBACA,gBAAkB,CAEtB,YACI,sBAAwB,CAE5B,YACI,eACA,YACA,aACA,sBACA,kBACA,iBACA,UAAa,CAEjB,wBACM,WACA,YACA,iBACA,gBACA,UAAY,CAElB,2BACM,eACA,kBACA,aACA,kBACA,WACA,UAAY,CAElB,YACI,gBACA,aACA,YACA,iBAAmB,CAIvB,wBAHI,kBACA,UAAY,CASf,YANG,YACA,YACA,iBAEA,eAAmB,CCjEvB,oBACE,SAAW","file":"static/css/app.adbcc170c68406fdb405040ea9cb125f.css","sourcesContent":["\n#app {\n width: 800px;\n margin: 0 auto;\n}\n#app .container {\n border: 1px solid;\n margin: 20px;\n height: 400px;\n text-align: center;\n}\n#app .test1 {\n width: 100px;\n height: 100px;\n line-height: 100px;\n border: 1px solid red;\n text-align: center;\n}\n#app .test2,\n #app .test3 {\n width: 160px;\n height: 50px;\n border: 1px solid blue;\n text-align: center;\n line-height: 50px;\n}\n#app .test3 {\n border: 1px solid green;\n}\n#app .test4 {\n font-size: 12px;\n width: 260px;\n height: 260px;\n border: 1px solid #ccc;\n text-align: center;\n line-height: 50px;\n color: white;\n}\n#app .test4 .test4-drag {\n width: 100%;\n height: 50px;\n line-height: 50px;\n background: black;\n opacity: .5;\n}\n#app .test4 .test4-content {\n font-size: 40px;\n line-height: 210px;\n height: 210px;\n text-align: center;\n color: black;\n width: 100%;\n}\n#app .test5 {\n background: #ccc;\n height: 140px;\n width: 350px;\n line-height: 140px;\n text-align: center;\n opacity: .7;\n}\n#app .test6 {\n width: 400px;\n height: 50px;\n line-height: 50px;\n text-align: center;\n background: yellow;\n opacity: .7;\n}\n\n\n\n// WEBPACK FOOTER //\n// webpack:///src/App.vue","\nh1[data-v-044b7e34] {\n color: red;\n}\n\n\n\n// WEBPACK FOOTER //\n// webpack:///src/components/Hello.vue"],"sourceRoot":""} -------------------------------------------------------------------------------- /docs/static/css/reset.css: -------------------------------------------------------------------------------- 1 | body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td { margin:0; padding:0; } 2 | 3 | body { color:#555; font-size:14px; font-family: Verdana, Arial, Helvetica, sans-serif; } 4 | 5 | a { color:#555; text-decoration:none; } 6 | 7 | li{list-style:none;} 8 | 9 | .clearfix:after {content: "."; display: block; height:0; clear:both; visibility: hidden;} 10 | .clearfix { *zoom:1; } -------------------------------------------------------------------------------- /docs/static/js/app.4ec2f887e7545730f097.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([0,2],[,function(t,e,a){"use strict";var r={};r.install=function(t){t.directive("drag",{inserted:function(t,e){t.style.cursor=e.value&&e.value.cursor?e.value.cursor:"default";var a=e.value&&e.value.moveElId?document.getElementById(e.value.moveElId):t;a.style.position="absolute","static"===getComputedStyle(a.parentNode,null).position&&(a.parentNode.style.position="relative");var r=function(r){if(e.modifiers.shaow){var s=a.cloneNode(!0);a.style.opacity="0.5",a.parentNode.appendChild(s)}var v,i;e.modifiers.dragY||(v=r.clientX-a.offsetLeft),e.modifiers.dragX||(i=r.clientY-a.offsetTop);var o=function(r){r.preventDefault();var s=r.clientX-v,o=r.clientY-i,d=e.value&&e.value.dragOutX?a.offsetWidth-e.value.dragOutX:0;if(e.value&&e.value.dragOutY)var n=a.offsetHeight-e.value.dragOutY,l=t.offsetHeight-e.value.dragOutY;else var n=0,l=0;if(s<0-d?s=0-d:s>a.parentNode.clientWidth-a.offsetWidth+d&&(s=a.parentNode.clientWidth-a.offsetWidth+d),o<0-l?o=0-l:o>a.parentNode.clientHeight-a.offsetHeight+n&&(o=a.parentNode.clientHeight-a.offsetHeight+n),a.style.left=s+"px",a.style.top=o+"px",e.value&&e.value.ondrag){if("function"!=typeof e.value.ondrag)throw"ondrag: should be a function";e.value.ondrag(r,{left:s,top:o})}};document.addEventListener("mousemove",o);var d=function t(){s&&(a.style.opacity="1",s.parentNode.removeChild(s)),document.removeEventListener("mousemove",o),document.removeEventListener("mouseup",t)};document.addEventListener("mouseup",d)};t.addEventListener("mousedown",r)}})},e.a=r},function(t,e,a){a(7);var r=a(0)(a(4),a(10),null,null);t.exports=r.exports},,function(t,e,a){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=a(8),s=a.n(r);e.default={name:"app",data:function(){return{arr:[1111,2222,4444,5555]}},methods:{drag:function(t,e){console.log(t,e)}},components:{Hello:s.a}}},function(t,e,a){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={name:"hello",data:function(){return{msg:"this is hello.vue"}}}},function(t,e){},function(t,e){},function(t,e,a){a(6);var r=a(0)(a(5),a(9),"data-v-044b7e34",null);t.exports=r.exports},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{attrs:{id:"hello"}},[a("h1",[t._v(t._s(t.msg))])])},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{attrs:{id:"app"}},[a("h1",{staticStyle:{"margin-bottom":"50px"}},[t._v("vue2-draggable文档（document）")]),t._v(" "),t._m(0),t._v(" "),a("hr"),t._v(" "),t._m(1),t._v(" "),a("hr"),t._v(" "),a("h2",[t._v("三、实例展示")]),t._v(" "),a("div",{staticClass:"container"},[a("h4",[t._v("容器内自由拖动")]),t._v(" "),a("div",{directives:[{name:"drag",rawName:"v-drag"}],staticClass:"test1"},[t._v("v-drag")])]),t._v(" "),a("div",{staticClass:"container"},[a("h4",[t._v("ondrag事件")]),t._v(" "),a("h4",{staticStyle:{color:"green"}},[t._v("源码: binding.value.ondrag(event, { left: left, top: top })")]),t._v(" "),a("h4",{staticStyle:{color:"green"}},[t._v("drag方法: drag(event,coordinate){ console.log(event, coordinate.left, coordinate.top) }")]),t._v(" "),a("div",{directives:[{name:"drag",rawName:"v-drag",value:{ondrag:t.drag},expression:"{ondrag:drag}"}],staticClass:"test1",staticStyle:{width:"400px"}},[t._v('v-drag="{ondrag:drag}"')])]),t._v(" "),a("div",{staticClass:"container"},[a("h4",[t._v("只能在容器内水平拖动")]),t._v(" "),a("div",{directives:[{name:"drag",rawName:"v-drag.dragX",modifiers:{dragX:!0}}],staticClass:"test2"},[t._v(" v-drag.dragX")])]),t._v(" "),a("div",{staticClass:"container"},[a("h4",[t._v("只能在容器内垂直拖动")]),t._v(" "),a("div",{directives:[{name:"drag",rawName:"v-drag.dragY",modifiers:{dragY:!0}}],staticClass:"test3"},[t._v("v-drag.dragY")])]),t._v(" "),a("div",{staticClass:"container"},[a("h4",[t._v("指定拖拽时鼠标样式,其值与cursor属性值一样")]),t._v(" "),a("div",{directives:[{name:"drag",rawName:"v-drag",value:{cursor:"move"},expression:"{cursor:'move'}"}],staticClass:"test5"},[t._v("v-drag=\"{cursor:'move'}\"")])]),t._v(" "),a("div",{staticClass:"container"},[a("h4",[t._v("moveElId为实际移动的元素的Id，默认拖动元素为自身")]),t._v(" "),a("div",{staticClass:"test4",attrs:{id:"test4-move"}},[a("div",{directives:[{name:"drag",rawName:"v-drag",value:{moveElId:"test4-move"},expression:"{moveElId:'test4-move'}"}],staticClass:"test4-drag"},[t._v("v-drag=\"{ moveElId: 'test4-move' }\"")]),t._v(" "),a("div",{staticClass:"test4-content"},[t._v("\n CONTENT\n ")])]),t._v(" "),a("pre",{staticStyle:{"text-align":"left"}},[t._v('\n
\n
\n
v-drag="{ moveElId: \'test4-move\' }"
\n
\n CONTENT\n
\n
\n
\n\n ')])]),t._v(" "),a("div",{staticClass:"container"},[a("h4",[t._v(".shaow 修饰符，实现和window桌面图标拖动的效果")]),t._v(" "),a("div",{staticClass:"test4",staticStyle:{width:"300px"},attrs:{id:"test4-move2"}},[a("div",{directives:[{name:"drag",rawName:"v-drag.shaow",value:{moveElId:"test4-move2"},expression:"{moveElId:'test4-move2'}",modifiers:{shaow:!0}}],staticClass:"test4-drag"},[t._v("v-drag.shaow=\"{ moveElId: 'test4-move2' }\"")]),t._v(" "),a("div",{staticClass:"test4-content"},[t._v("\n CONTENT\n ")])])]),t._v(" "),a("div",{staticClass:"container"},[a("h4",[t._v("允许拖出容器之外，但是设置保留值")]),t._v(" "),t._m(2),t._v(" "),t._m(3),t._v(" "),a("h4",{staticStyle:{color:"red"}},[t._v("dragOutX,dragOutX的值必须为数字类型")]),t._v(" "),a("div",{directives:[{name:"drag",rawName:"v-drag",value:{dragOutX:15,dragOutY:15},expression:"{dragOutX:15,dragOutY:15}"}],staticClass:"test5"},[t._v('v-drag="{dragOutX:15,dragOutY:15}"')])]),t._v(" "),a("div",{staticClass:"container"},[a("h4",[t._v("组合使用")]),t._v(" "),a("div",{directives:[{name:"drag",rawName:"v-drag.dragX",value:{dragOutX:60},expression:"{dragOutX:60}",modifiers:{dragX:!0}}],staticClass:"test6"},[t._v('v-drag.dragX="{dragOutX:60}"')])]),t._v(" "),a("div",{staticClass:"container"},[a("h4",[t._v("向上拖动时，可拖动区域不会被拖出去,但是样式需要限制为，可拖动区域在顶部,且宽度与外层相等")]),t._v(" "),a("div",{staticClass:"test4",staticStyle:{width:"400px"},attrs:{id:"test4-move3"}},[a("div",{directives:[{name:"drag",rawName:"v-drag.shaow",value:{moveElId:"test4-move3",dragOutX:15,dragOutY:15},expression:"{ moveElId: 'test4-move3',dragOutX:15,dragOutY:15 }",modifiers:{shaow:!0}}],staticClass:"test4-drag",staticStyle:{width:"400px"}},[t._v("v-drag=\"{ moveElId: 'test4-move3',dragOutX:15,dragOutY:15 }\"")]),t._v(" "),a("div",{staticClass:"test4-content"},[t._v("\n CONTENT\n ")])])])])},staticRenderFns:[function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("h2",[t._v("一、注意！")]),t._v(" "),a("p",[t._v("1.拖动的元素，指令会自动加上position:absolute;")]),t._v(" "),a("p",[t._v("2.如果父元素没有使用position定位，那么指令会自动给父元素加上position:relative;")]),t._v(" "),a("p",[t._v("3.默认元素是无法拖出容器之外的")]),t._v(" "),a("p",{staticStyle:{color:"red"}},[a("strong",[t._v("4.约定：拖动元素的父级必须是容器元素")])]),t._v(" "),a("p",{staticStyle:{color:"red"}},[a("strong",[t._v("5.为了避免父子margin重叠造成高度计算误差，不要对拖拽元素使用margin属性。（注意：如果容器已经BFC化的话就无视这条，例如设置了overflow:hidden）")])])])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("h2",[t._v("二、如何使用")]),t._v(" "),a("h3",[t._v("安装")]),t._v(" "),a("p",{staticStyle:{color:"blue"}},[a("strong",[t._v("npm install vue-dragdrag --save-dev ")])]),t._v(" "),a("p",{staticStyle:{color:"blue"}},[a("strong",[t._v("import vueDragDrag from 'vue-dragdrag' ")])]),t._v(" "),a("p",{staticStyle:{color:"blue"}},[a("strong",[t._v("Vue.use(vueDragDrag)")])]),t._v(" "),a("h3",[t._v("vue指令使用")]),t._v(" "),a("p",{staticStyle:{color:"green"}},[a("strong",[t._v("
")])])])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("h4",[t._v("{ dragOutX:15,dragOutY:15 }代表有"),a("strong",{staticStyle:{color:"red"}},[t._v("上下和左右")]),t._v("有15px的保留距离")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("h4",[t._v("如果值设置成 { dragOutX:15 }代表"),a("strong",{staticStyle:{color:"red"}},[t._v("只有左右")]),t._v("15px的保留距离")])}]}},,,function(t,e,a){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=a(3),s=a.n(r),v=a(2),i=a.n(v),o=a(1);console.log(o.a),s.a.use(o.a),new s.a({el:"#app",template:"",components:{App:i.a}})}],[13]); 2 | //# sourceMappingURL=app.4ec2f887e7545730f097.js.map -------------------------------------------------------------------------------- /docs/static/js/app.4ec2f887e7545730f097.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///static/js/app.4ec2f887e7545730f097.js","webpack:///./src/vue-dragdrag/vue-dragdrag.js","webpack:///./src/App.vue","webpack:///App.vue","webpack:///Hello.vue","webpack:///./src/components/Hello.vue","webpack:///./src/components/Hello.vue?c470","webpack:///./src/App.vue?6e06","webpack:///./src/main.js"],"names":["webpackJsonp","module","__webpack_exports__","__webpack_require__","vueDragDrag","install","Vue","directive","inserted","el","binding","style","cursor","value","moveEl","moveElId","document","getElementById","position","getComputedStyle","parentNode","mouseDownFn","e","modifiers","shaow","newNode","cloneNode","opacity","appendChild","disX","disY","dragY","clientX","offsetLeft","dragX","clientY","offsetTop","mouseMoveFn","preventDefault","left","top","limitWidth","dragOutX","offsetWidth","dragOutY","limitHeigth","offsetHeight","limitHeigthTop","clientWidth","clientHeight","ondrag","addEventListener","mouseUpFn","removeChild","removeEventListener","exports","Component","Object","defineProperty","__WEBPACK_IMPORTED_MODULE_0__components_Hello__","__WEBPACK_IMPORTED_MODULE_0__components_Hello___default","n","name","data","arr","methods","drag","obj","console","log","components","Hello","a","msg","render","_vm","this","_h","$createElement","_c","_self","attrs","id","_v","_s","staticRenderFns","staticStyle","margin-bottom","_m","staticClass","directives","rawName","color","expression","width","text-align","__WEBPACK_IMPORTED_MODULE_0_vue__","__WEBPACK_IMPORTED_MODULE_0_vue___default","__WEBPACK_IMPORTED_MODULE_1__App__","__WEBPACK_IMPORTED_MODULE_1__App___default","__WEBPACK_IMPORTED_MODULE_2__vue_dragdrag_vue_dragdrag_js__","use","template","App"],"mappings":"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","file":"static/js/app.4ec2f887e7545730f097.js","sourcesContent":["webpackJsonp([0,2],[\n/* 0 */,\n/* 1 */\n/***/ (function(module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\n\nvar vueDragDrag = {};\n\nvueDragDrag.install = function (Vue) {\n Vue.directive('drag', {\n inserted: function inserted(el, binding) {\n el.style.cursor = binding.value && binding.value.cursor ? binding.value.cursor : 'default';\n\n var moveEl = binding.value && binding.value.moveElId ? document.getElementById(binding.value.moveElId) : el;\n\n moveEl.style.position = 'absolute';\n\n if (getComputedStyle(moveEl.parentNode, null).position === 'static') {\n moveEl.parentNode.style.position = 'relative';\n }\n\n var mouseDownFn = function mouseDownFn(e) {\n if (binding.modifiers.shaow) {\n var newNode = moveEl.cloneNode(true);\n moveEl.style.opacity = '0.5';\n moveEl.parentNode.appendChild(newNode);\n }\n\n\n var disX, disY;\n if (!binding.modifiers.dragY) disX = e.clientX - moveEl.offsetLeft;\n if (!binding.modifiers.dragX) disY = e.clientY - moveEl.offsetTop;\n var mouseMoveFn = function mouseMoveFn(e) {\n e.preventDefault();\n var left = e.clientX - disX;\n var top = e.clientY - disY;\n\n var limitWidth = binding.value && binding.value.dragOutX ? moveEl.offsetWidth - binding.value.dragOutX : 0;\n\n if (binding.value && binding.value.dragOutY) {\n var limitHeigth = moveEl.offsetHeight - binding.value.dragOutY;\n\n var limitHeigthTop = el.offsetHeight - binding.value.dragOutY;\n } else {\n var limitHeigth = 0;\n var limitHeigthTop = 0;\n }\n\n if (left < 0 - limitWidth) {\n left = 0 - limitWidth;\n } else if (left > moveEl.parentNode.clientWidth - moveEl.offsetWidth + limitWidth) {\n left = moveEl.parentNode.clientWidth - moveEl.offsetWidth + limitWidth;\n }\n\n if (top < 0 - limitHeigthTop) {\n top = 0 - limitHeigthTop;\n } else if (top > moveEl.parentNode.clientHeight - moveEl.offsetHeight + limitHeigth) {\n top = moveEl.parentNode.clientHeight - moveEl.offsetHeight + limitHeigth;\n }\n moveEl.style.left = left + 'px';\n moveEl.style.top = top + 'px';\n\n if (binding.value && binding.value.ondrag) {\n if (typeof binding.value.ondrag != 'function') throw 'ondrag: should be a function';\n binding.value.ondrag(e, { left: left, top: top });\n }\n };\n\n document.addEventListener('mousemove', mouseMoveFn);\n\n var mouseUpFn = function mouseUpFn() {\n if (newNode) {\n moveEl.style.opacity = '1';\n newNode.parentNode.removeChild(newNode);\n }\n document.removeEventListener('mousemove', mouseMoveFn);\n document.removeEventListener('mouseup', mouseUpFn);\n };\n\n document.addEventListener('mouseup', mouseUpFn);\n };\n\n el.addEventListener('mousedown', mouseDownFn);\n }\n });\n};\n\n/* harmony default export */ __webpack_exports__[\"a\"] = vueDragDrag;\n\n/***/ }),\n/* 2 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\n/* styles */\n__webpack_require__(7)\n\nvar Component = __webpack_require__(0)(\n /* script */\n __webpack_require__(4),\n /* template */\n __webpack_require__(10),\n /* scopeId */\n null,\n /* cssModules */\n null\n)\n\nmodule.exports = Component.exports\n\n\n/***/ }),\n/* 3 */,\n/* 4 */\n/***/ (function(module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\nObject.defineProperty(__webpack_exports__, \"__esModule\", { value: true });\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__components_Hello__ = __webpack_require__(8);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__components_Hello___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__components_Hello__);\n\n\n\n\n/* harmony default export */ __webpack_exports__[\"default\"] = {\n name: 'app',\n data: function data() {\n return {\n arr: [1111, 2222, 4444, 5555]\n };\n },\n\n methods: {\n drag: function drag(e, obj) {\n console.log(e, obj);\n }\n },\n components: {\n Hello: __WEBPACK_IMPORTED_MODULE_0__components_Hello___default.a\n }\n};\n\n/***/ }),\n/* 5 */\n/***/ (function(module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\nObject.defineProperty(__webpack_exports__, \"__esModule\", { value: true });\n\n\n/* harmony default export */ __webpack_exports__[\"default\"] = {\n name: 'hello',\n data: function data() {\n return {\n msg: 'this is hello.vue'\n };\n }\n};\n\n/***/ }),\n/* 6 */\n/***/ (function(module, exports) {\n\n// removed by extract-text-webpack-plugin\n\n/***/ }),\n/* 7 */\n/***/ (function(module, exports) {\n\n// removed by extract-text-webpack-plugin\n\n/***/ }),\n/* 8 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\n/* styles */\n__webpack_require__(6)\n\nvar Component = __webpack_require__(0)(\n /* script */\n __webpack_require__(5),\n /* template */\n __webpack_require__(9),\n /* scopeId */\n \"data-v-044b7e34\",\n /* cssModules */\n null\n)\n\nmodule.exports = Component.exports\n\n\n/***/ }),\n/* 9 */\n/***/ (function(module, exports) {\n\nmodule.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n return _c('div', {\n attrs: {\n \"id\": \"hello\"\n }\n }, [_c('h1', [_vm._v(_vm._s(_vm.msg))])])\n},staticRenderFns: []}\n\n/***/ }),\n/* 10 */\n/***/ (function(module, exports) {\n\nmodule.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n return _c('div', {\n attrs: {\n \"id\": \"app\"\n }\n }, [_c('h1', {\n staticStyle: {\n \"margin-bottom\": \"50px\"\n }\n }, [_vm._v(\"vue2-draggable文档（document）\")]), _vm._v(\" \"), _vm._m(0), _vm._v(\" \"), _c('hr'), _vm._v(\" \"), _vm._m(1), _vm._v(\" \"), _c('hr'), _vm._v(\" \"), _c('h2', [_vm._v(\"三、实例展示\")]), _vm._v(\" \"), _c('div', {\n staticClass: \"container\"\n }, [_c('h4', [_vm._v(\"容器内自由拖动\")]), _vm._v(\" \"), _c('div', {\n directives: [{\n name: \"drag\",\n rawName: \"v-drag\"\n }],\n staticClass: \"test1\"\n }, [_vm._v(\"v-drag\")])]), _vm._v(\" \"), _c('div', {\n staticClass: \"container\"\n }, [_c('h4', [_vm._v(\"ondrag事件\")]), _vm._v(\" \"), _c('h4', {\n staticStyle: {\n \"color\": \"green\"\n }\n }, [_vm._v(\"源码: binding.value.ondrag(event, { left: left, top: top })\")]), _vm._v(\" \"), _c('h4', {\n staticStyle: {\n \"color\": \"green\"\n }\n }, [_vm._v(\"drag方法: drag(event,coordinate){ console.log(event, coordinate.left, coordinate.top) }\")]), _vm._v(\" \"), _c('div', {\n directives: [{\n name: \"drag\",\n rawName: \"v-drag\",\n value: ({\n ondrag: _vm.drag\n }),\n expression: \"{ondrag:drag}\"\n }],\n staticClass: \"test1\",\n staticStyle: {\n \"width\": \"400px\"\n }\n }, [_vm._v(\"v-drag=\\\"{ondrag:drag}\\\"\")])]), _vm._v(\" \"), _c('div', {\n staticClass: \"container\"\n }, [_c('h4', [_vm._v(\"只能在容器内水平拖动\")]), _vm._v(\" \"), _c('div', {\n directives: [{\n name: \"drag\",\n rawName: \"v-drag.dragX\",\n modifiers: {\n \"dragX\": true\n }\n }],\n staticClass: \"test2\"\n }, [_vm._v(\" v-drag.dragX\")])]), _vm._v(\" \"), _c('div', {\n staticClass: \"container\"\n }, [_c('h4', [_vm._v(\"只能在容器内垂直拖动\")]), _vm._v(\" \"), _c('div', {\n directives: [{\n name: \"drag\",\n rawName: \"v-drag.dragY\",\n modifiers: {\n \"dragY\": true\n }\n }],\n staticClass: \"test3\"\n }, [_vm._v(\"v-drag.dragY\")])]), _vm._v(\" \"), _c('div', {\n staticClass: \"container\"\n }, [_c('h4', [_vm._v(\"指定拖拽时鼠标样式,其值与cursor属性值一样\")]), _vm._v(\" \"), _c('div', {\n directives: [{\n name: \"drag\",\n rawName: \"v-drag\",\n value: ({\n cursor: 'move'\n }),\n expression: \"{cursor:'move'}\"\n }],\n staticClass: \"test5\"\n }, [_vm._v(\"v-drag=\\\"{cursor:'move'}\\\"\")])]), _vm._v(\" \"), _c('div', {\n staticClass: \"container\"\n }, [_c('h4', [_vm._v(\"moveElId为实际移动的元素的Id，默认拖动元素为自身\")]), _vm._v(\" \"), _c('div', {\n staticClass: \"test4\",\n attrs: {\n \"id\": \"test4-move\"\n }\n }, [_c('div', {\n directives: [{\n name: \"drag\",\n rawName: \"v-drag\",\n value: ({\n moveElId: 'test4-move'\n }),\n expression: \"{moveElId:'test4-move'}\"\n }],\n staticClass: \"test4-drag\"\n }, [_vm._v(\"v-drag=\\\"{ moveElId: 'test4-move' }\\\"\")]), _vm._v(\" \"), _c('div', {\n staticClass: \"test4-content\"\n }, [_vm._v(\"\\n CONTENT\\n \")])]), _vm._v(\" \"), _c('pre', {\n staticStyle: {\n \"text-align\": \"left\"\n }\n }, [_vm._v(\"\\n
\\n
\\n
v-drag=\\\"{ moveElId: 'test4-move' }\\\"
\\n
\\n CONTENT\\n
\\n
\\n
\\n\\n \")])]), _vm._v(\" \"), _c('div', {\n staticClass: \"container\"\n }, [_c('h4', [_vm._v(\".shaow 修饰符，实现和window桌面图标拖动的效果\")]), _vm._v(\" \"), _c('div', {\n staticClass: \"test4\",\n staticStyle: {\n \"width\": \"300px\"\n },\n attrs: {\n \"id\": \"test4-move2\"\n }\n }, [_c('div', {\n directives: [{\n name: \"drag\",\n rawName: \"v-drag.shaow\",\n value: ({\n moveElId: 'test4-move2'\n }),\n expression: \"{moveElId:'test4-move2'}\",\n modifiers: {\n \"shaow\": true\n }\n }],\n staticClass: \"test4-drag\"\n }, [_vm._v(\"v-drag.shaow=\\\"{ moveElId: 'test4-move2' }\\\"\")]), _vm._v(\" \"), _c('div', {\n staticClass: \"test4-content\"\n }, [_vm._v(\"\\n CONTENT\\n \")])])]), _vm._v(\" \"), _c('div', {\n staticClass: \"container\"\n }, [_c('h4', [_vm._v(\"允许拖出容器之外，但是设置保留值\")]), _vm._v(\" \"), _vm._m(2), _vm._v(\" \"), _vm._m(3), _vm._v(\" \"), _c('h4', {\n staticStyle: {\n \"color\": \"red\"\n }\n }, [_vm._v(\"dragOutX,dragOutX的值必须为数字类型\")]), _vm._v(\" \"), _c('div', {\n directives: [{\n name: \"drag\",\n rawName: \"v-drag\",\n value: ({\n dragOutX: 15,\n dragOutY: 15\n }),\n expression: \"{dragOutX:15,dragOutY:15}\"\n }],\n staticClass: \"test5\"\n }, [_vm._v(\"v-drag=\\\"{dragOutX:15,dragOutY:15}\\\"\")])]), _vm._v(\" \"), _c('div', {\n staticClass: \"container\"\n }, [_c('h4', [_vm._v(\"组合使用\")]), _vm._v(\" \"), _c('div', {\n directives: [{\n name: \"drag\",\n rawName: \"v-drag.dragX\",\n value: ({\n dragOutX: 60\n }),\n expression: \"{dragOutX:60}\",\n modifiers: {\n \"dragX\": true\n }\n }],\n staticClass: \"test6\"\n }, [_vm._v(\"v-drag.dragX=\\\"{dragOutX:60}\\\"\")])]), _vm._v(\" \"), _c('div', {\n staticClass: \"container\"\n }, [_c('h4', [_vm._v(\"向上拖动时，可拖动区域不会被拖出去,但是样式需要限制为，可拖动区域在顶部,且宽度与外层相等\")]), _vm._v(\" \"), _c('div', {\n staticClass: \"test4\",\n staticStyle: {\n \"width\": \"400px\"\n },\n attrs: {\n \"id\": \"test4-move3\"\n }\n }, [_c('div', {\n directives: [{\n name: \"drag\",\n rawName: \"v-drag.shaow\",\n value: ({\n moveElId: 'test4-move3',\n dragOutX: 15,\n dragOutY: 15\n }),\n expression: \"{ moveElId: 'test4-move3',dragOutX:15,dragOutY:15 }\",\n modifiers: {\n \"shaow\": true\n }\n }],\n staticClass: \"test4-drag\",\n staticStyle: {\n \"width\": \"400px\"\n }\n }, [_vm._v(\"v-drag=\\\"{ moveElId: 'test4-move3',dragOutX:15,dragOutY:15 }\\\"\")]), _vm._v(\" \"), _c('div', {\n staticClass: \"test4-content\"\n }, [_vm._v(\"\\n CONTENT\\n \")])])])])\n},staticRenderFns: [function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n return _c('div', [_c('h2', [_vm._v(\"一、注意！\")]), _vm._v(\" \"), _c('p', [_vm._v(\"1.拖动的元素，指令会自动加上position:absolute;\")]), _vm._v(\" \"), _c('p', [_vm._v(\"2.如果父元素没有使用position定位，那么指令会自动给父元素加上position:relative;\")]), _vm._v(\" \"), _c('p', [_vm._v(\"3.默认元素是无法拖出容器之外的\")]), _vm._v(\" \"), _c('p', {\n staticStyle: {\n \"color\": \"red\"\n }\n }, [_c('strong', [_vm._v(\"4.约定：拖动元素的父级必须是容器元素\")])]), _vm._v(\" \"), _c('p', {\n staticStyle: {\n \"color\": \"red\"\n }\n }, [_c('strong', [_vm._v(\"5.为了避免父子margin重叠造成高度计算误差，不要对拖拽元素使用margin属性。（注意：如果容器已经BFC化的话就无视这条，例如设置了overflow:hidden）\")])])])\n},function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n return _c('div', [_c('h2', [_vm._v(\"二、如何使用\")]), _vm._v(\" \"), _c('h3', [_vm._v(\"安装\")]), _vm._v(\" \"), _c('p', {\n staticStyle: {\n \"color\": \"blue\"\n }\n }, [_c('strong', [_vm._v(\"npm install vue-dragdrag --save-dev \")])]), _vm._v(\" \"), _c('p', {\n staticStyle: {\n \"color\": \"blue\"\n }\n }, [_c('strong', [_vm._v(\"import vueDragDrag from 'vue-dragdrag' \")])]), _vm._v(\" \"), _c('p', {\n staticStyle: {\n \"color\": \"blue\"\n }\n }, [_c('strong', [_vm._v(\"Vue.use(vueDragDrag)\")])]), _vm._v(\" \"), _c('h3', [_vm._v(\"vue指令使用\")]), _vm._v(\" \"), _c('p', {\n staticStyle: {\n \"color\": \"green\"\n }\n }, [_c('strong', [_vm._v(\"
\")])])])\n},function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n return _c('h4', [_vm._v(\"{ dragOutX:15,dragOutY:15 }代表有\"), _c('strong', {\n staticStyle: {\n \"color\": \"red\"\n }\n }, [_vm._v(\"上下和左右\")]), _vm._v(\"有15px的保留距离\")])\n},function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n return _c('h4', [_vm._v(\"如果值设置成 { dragOutX:15 }代表\"), _c('strong', {\n staticStyle: {\n \"color\": \"red\"\n }\n }, [_vm._v(\"只有左右\")]), _vm._v(\"15px的保留距离\")])\n}]}\n\n/***/ }),\n/* 11 */,\n/* 12 */,\n/* 13 */\n/***/ (function(module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\nObject.defineProperty(__webpack_exports__, \"__esModule\", { value: true });\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_vue__ = __webpack_require__(3);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_vue__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__App__ = __webpack_require__(2);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__App___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1__App__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__vue_dragdrag_vue_dragdrag_js__ = __webpack_require__(1);\n\n\n\n\n\nconsole.log(__WEBPACK_IMPORTED_MODULE_2__vue_dragdrag_vue_dragdrag_js__[\"a\" /* default */]);\n__WEBPACK_IMPORTED_MODULE_0_vue___default.a.use(__WEBPACK_IMPORTED_MODULE_2__vue_dragdrag_vue_dragdrag_js__[\"a\" /* default */]);\n\nnew __WEBPACK_IMPORTED_MODULE_0_vue___default.a({\n el: '#app',\n template: '',\n components: { App: __WEBPACK_IMPORTED_MODULE_1__App___default.a }\n});\n\n/***/ })\n],[13]);\n\n\n// WEBPACK FOOTER //\n// static/js/app.4ec2f887e7545730f097.js","\n// (function () {\nvar vueDragDrag = {}\n\nvueDragDrag.install = function (Vue) {\n Vue.directive('drag', {\n inserted: function (el, binding) {\n // 拖拽时的手势\n el.style.cursor = binding.value && binding.value.cursor ? binding.value.cursor : 'default'\n\n // 如果拖动元素非元素本身（el），传入id\n var moveEl = binding.value && binding.value.moveElId ? document.getElementById(binding.value.moveElId) : el\n // 为拖动元素添加绝对定位\n moveEl.style.position = 'absolute'\n\n // 如果容器为设置position属性，默认为 position = 'relative'\n if (getComputedStyle(moveEl.parentNode, null).position === 'static') {\n moveEl.parentNode.style.position = 'relative'\n }\n\n var mouseDownFn = function (e) {\n\n //.shaow---------- 复制节点，并且插入容器中原来位置\n if (binding.modifiers.shaow) {\n var newNode = moveEl.cloneNode(true)\n moveEl.style.opacity = '0.5'\n moveEl.parentNode.appendChild(newNode)\n }\n //----------\n\n\n var disX, disY\n if (!binding.modifiers.dragY) disX = e.clientX - moveEl.offsetLeft\n if (!binding.modifiers.dragX) disY = e.clientY - moveEl.offsetTop\n var mouseMoveFn = function (e) {\n e.preventDefault()\n var left = e.clientX - disX\n var top = e.clientY - disY\n\n // 可以拖出去的元素的剩余宽度\n // dragOutX\n var limitWidth = binding.value && binding.value.dragOutX ? moveEl.offsetWidth - binding.value.dragOutX : 0\n // dragOutY\n if (binding.value && binding.value.dragOutY) {\n var limitHeigth = moveEl.offsetHeight - binding.value.dragOutY\n // 防止可拖拽区域被拖出容器区域\n // 拖拽元素在顶部\n var limitHeigthTop = el.offsetHeight - binding.value.dragOutY\n } else {\n var limitHeigth = 0\n var limitHeigthTop = 0\n }\n\n\n if (left < 0 - limitWidth) {\n left = 0 - limitWidth\n }\n else if (left > moveEl.parentNode.clientWidth - moveEl.offsetWidth + limitWidth) {\n left = moveEl.parentNode.clientWidth - moveEl.offsetWidth + limitWidth\n }\n\n if (top < 0 - limitHeigthTop) {\n top = 0 - limitHeigthTop\n }\n else if (top > moveEl.parentNode.clientHeight - moveEl.offsetHeight + limitHeigth) {\n top = moveEl.parentNode.clientHeight - moveEl.offsetHeight + limitHeigth;\n }\n moveEl.style.left = left + 'px'\n moveEl.style.top = top + 'px'\n\n // 拖拽事件\n if (binding.value && binding.value.ondrag) {\n if (typeof binding.value.ondrag != 'function') throw 'ondrag: should be a function'\n binding.value.ondrag(e, { left: left, top: top })\n }\n\n }\n // mousemove\n document.addEventListener('mousemove', mouseMoveFn)\n\n var mouseUpFn = function () {\n\n // 移除临时shaow节点\n if (newNode) {\n moveEl.style.opacity = '1'\n newNode.parentNode.removeChild(newNode)\n }\n document.removeEventListener('mousemove', mouseMoveFn)\n document.removeEventListener('mouseup', mouseUpFn)\n }\n // mouseup\n document.addEventListener('mouseup', mouseUpFn)\n }\n\n // mousedown\n el.addEventListener('mousedown', mouseDownFn)\n\n }\n })\n}\n\n// 输出\n// if (typeof exports == \"object\") {\n// module.exports = vueDragDrag;\n// } else if (typeof define == \"function\" && define.amd) {\n// define([], function () {\n// return vueDragDrag\n// })\n// } else if (window.Vue) {\n// window.vueDragDrag = vueDragDrag;\n// Vue.use(vueDragDrag);\n// }\n// })();\nexport default vueDragDrag\n\n\n\n// WEBPACK FOOTER //\n// ./src/vue-dragdrag/vue-dragdrag.js","\n/* styles */\nrequire(\"!!./../node_modules/extract-text-webpack-plugin/loader.js?{\\\"omit\\\":1,\\\"remove\\\":true}!vue-style-loader!css-loader?minimize&sourceMap!./../node_modules/vue-loader/lib/style-rewriter?{\\\"id\\\":\\\"data-v-b87f08b8\\\",\\\"scoped\\\":false,\\\"hasInlineConfig\\\":true}!sass-loader?sourceMap!./../node_modules/vue-loader/lib/selector?type=styles&index=0!./App.vue\")\n\nvar Component = require(\"!./../node_modules/vue-loader/lib/component-normalizer\")(\n /* script */\n require(\"!!babel-loader!./../node_modules/vue-loader/lib/selector?type=script&index=0!./App.vue\"),\n /* template */\n require(\"!!./../node_modules/vue-loader/lib/template-compiler?{\\\"id\\\":\\\"data-v-b87f08b8\\\"}!./../node_modules/vue-loader/lib/selector?type=template&index=0!./App.vue\"),\n /* scopeId */\n null,\n /* cssModules */\n null\n)\n\nmodule.exports = Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/App.vue\n// module id = 2\n// module chunks = 0","\n\n\n\n\n\n\n\n// WEBPACK FOOTER //\n// App.vue?644e5b19","\n\n\n\n\n\n\n\n\n// WEBPACK FOOTER //\n// Hello.vue?5554c5fc","\n/* styles */\nrequire(\"!!./../../node_modules/extract-text-webpack-plugin/loader.js?{\\\"omit\\\":1,\\\"remove\\\":true}!vue-style-loader!css-loader?minimize&sourceMap!./../../node_modules/vue-loader/lib/style-rewriter?{\\\"id\\\":\\\"data-v-044b7e34\\\",\\\"scoped\\\":true,\\\"hasInlineConfig\\\":true}!sass-loader?sourceMap!./../../node_modules/vue-loader/lib/selector?type=styles&index=0!./Hello.vue\")\n\nvar Component = require(\"!./../../node_modules/vue-loader/lib/component-normalizer\")(\n /* script */\n require(\"!!babel-loader!./../../node_modules/vue-loader/lib/selector?type=script&index=0!./Hello.vue\"),\n /* template */\n require(\"!!./../../node_modules/vue-loader/lib/template-compiler?{\\\"id\\\":\\\"data-v-044b7e34\\\"}!./../../node_modules/vue-loader/lib/template-loader?raw&engine=pug!./../../node_modules/vue-loader/lib/selector?type=template&index=0!./Hello.vue\"),\n /* scopeId */\n \"data-v-044b7e34\",\n /* cssModules */\n null\n)\n\nmodule.exports = Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/components/Hello.vue\n// module id = 8\n// module chunks = 0","module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n return _c('div', {\n attrs: {\n \"id\": \"hello\"\n }\n }, [_c('h1', [_vm._v(_vm._s(_vm.msg))])])\n},staticRenderFns: []}\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/vue-loader/lib/template-compiler.js?{\"id\":\"data-v-044b7e34\"}!./~/vue-loader/lib/template-loader.js?raw&engine=pug!./~/vue-loader/lib/selector.js?type=template&index=0!./src/components/Hello.vue\n// module id = 9\n// module chunks = 0","module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n return _c('div', {\n attrs: {\n \"id\": \"app\"\n }\n }, [_c('h1', {\n staticStyle: {\n \"margin-bottom\": \"50px\"\n }\n }, [_vm._v(\"vue2-draggable文档（document）\")]), _vm._v(\" \"), _vm._m(0), _vm._v(\" \"), _c('hr'), _vm._v(\" \"), _vm._m(1), _vm._v(\" \"), _c('hr'), _vm._v(\" \"), _c('h2', [_vm._v(\"三、实例展示\")]), _vm._v(\" \"), _c('div', {\n staticClass: \"container\"\n }, [_c('h4', [_vm._v(\"容器内自由拖动\")]), _vm._v(\" \"), _c('div', {\n directives: [{\n name: \"drag\",\n rawName: \"v-drag\"\n }],\n staticClass: \"test1\"\n }, [_vm._v(\"v-drag\")])]), _vm._v(\" \"), _c('div', {\n staticClass: \"container\"\n }, [_c('h4', [_vm._v(\"ondrag事件\")]), _vm._v(\" \"), _c('h4', {\n staticStyle: {\n \"color\": \"green\"\n }\n }, [_vm._v(\"源码: binding.value.ondrag(event, { left: left, top: top })\")]), _vm._v(\" \"), _c('h4', {\n staticStyle: {\n \"color\": \"green\"\n }\n }, [_vm._v(\"drag方法: drag(event,coordinate){ console.log(event, coordinate.left, coordinate.top) }\")]), _vm._v(\" \"), _c('div', {\n directives: [{\n name: \"drag\",\n rawName: \"v-drag\",\n value: ({\n ondrag: _vm.drag\n }),\n expression: \"{ondrag:drag}\"\n }],\n staticClass: \"test1\",\n staticStyle: {\n \"width\": \"400px\"\n }\n }, [_vm._v(\"v-drag=\\\"{ondrag:drag}\\\"\")])]), _vm._v(\" \"), _c('div', {\n staticClass: \"container\"\n }, [_c('h4', [_vm._v(\"只能在容器内水平拖动\")]), _vm._v(\" \"), _c('div', {\n directives: [{\n name: \"drag\",\n rawName: \"v-drag.dragX\",\n modifiers: {\n \"dragX\": true\n }\n }],\n staticClass: \"test2\"\n }, [_vm._v(\" v-drag.dragX\")])]), _vm._v(\" \"), _c('div', {\n staticClass: \"container\"\n }, [_c('h4', [_vm._v(\"只能在容器内垂直拖动\")]), _vm._v(\" \"), _c('div', {\n directives: [{\n name: \"drag\",\n rawName: \"v-drag.dragY\",\n modifiers: {\n \"dragY\": true\n }\n }],\n staticClass: \"test3\"\n }, [_vm._v(\"v-drag.dragY\")])]), _vm._v(\" \"), _c('div', {\n staticClass: \"container\"\n }, [_c('h4', [_vm._v(\"指定拖拽时鼠标样式,其值与cursor属性值一样\")]), _vm._v(\" \"), _c('div', {\n directives: [{\n name: \"drag\",\n rawName: \"v-drag\",\n value: ({\n cursor: 'move'\n }),\n expression: \"{cursor:'move'}\"\n }],\n staticClass: \"test5\"\n }, [_vm._v(\"v-drag=\\\"{cursor:'move'}\\\"\")])]), _vm._v(\" \"), _c('div', {\n staticClass: \"container\"\n }, [_c('h4', [_vm._v(\"moveElId为实际移动的元素的Id，默认拖动元素为自身\")]), _vm._v(\" \"), _c('div', {\n staticClass: \"test4\",\n attrs: {\n \"id\": \"test4-move\"\n }\n }, [_c('div', {\n directives: [{\n name: \"drag\",\n rawName: \"v-drag\",\n value: ({\n moveElId: 'test4-move'\n }),\n expression: \"{moveElId:'test4-move'}\"\n }],\n staticClass: \"test4-drag\"\n }, [_vm._v(\"v-drag=\\\"{ moveElId: 'test4-move' }\\\"\")]), _vm._v(\" \"), _c('div', {\n staticClass: \"test4-content\"\n }, [_vm._v(\"\\n CONTENT\\n \")])]), _vm._v(\" \"), _c('pre', {\n staticStyle: {\n \"text-align\": \"left\"\n }\n }, [_vm._v(\"\\n
\\n
\\n
v-drag=\\\"{ moveElId: 'test4-move' }\\\"
\\n
\\n CONTENT\\n
\\n
\\n
\\n\\n \")])]), _vm._v(\" \"), _c('div', {\n staticClass: \"container\"\n }, [_c('h4', [_vm._v(\".shaow 修饰符，实现和window桌面图标拖动的效果\")]), _vm._v(\" \"), _c('div', {\n staticClass: \"test4\",\n staticStyle: {\n \"width\": \"300px\"\n },\n attrs: {\n \"id\": \"test4-move2\"\n }\n }, [_c('div', {\n directives: [{\n name: \"drag\",\n rawName: \"v-drag.shaow\",\n value: ({\n moveElId: 'test4-move2'\n }),\n expression: \"{moveElId:'test4-move2'}\",\n modifiers: {\n \"shaow\": true\n }\n }],\n staticClass: \"test4-drag\"\n }, [_vm._v(\"v-drag.shaow=\\\"{ moveElId: 'test4-move2' }\\\"\")]), _vm._v(\" \"), _c('div', {\n staticClass: \"test4-content\"\n }, [_vm._v(\"\\n CONTENT\\n \")])])]), _vm._v(\" \"), _c('div', {\n staticClass: \"container\"\n }, [_c('h4', [_vm._v(\"允许拖出容器之外，但是设置保留值\")]), _vm._v(\" \"), _vm._m(2), _vm._v(\" \"), _vm._m(3), _vm._v(\" \"), _c('h4', {\n staticStyle: {\n \"color\": \"red\"\n }\n }, [_vm._v(\"dragOutX,dragOutX的值必须为数字类型\")]), _vm._v(\" \"), _c('div', {\n directives: [{\n name: \"drag\",\n rawName: \"v-drag\",\n value: ({\n dragOutX: 15,\n dragOutY: 15\n }),\n expression: \"{dragOutX:15,dragOutY:15}\"\n }],\n staticClass: \"test5\"\n }, [_vm._v(\"v-drag=\\\"{dragOutX:15,dragOutY:15}\\\"\")])]), _vm._v(\" \"), _c('div', {\n staticClass: \"container\"\n }, [_c('h4', [_vm._v(\"组合使用\")]), _vm._v(\" \"), _c('div', {\n directives: [{\n name: \"drag\",\n rawName: \"v-drag.dragX\",\n value: ({\n dragOutX: 60\n }),\n expression: \"{dragOutX:60}\",\n modifiers: {\n \"dragX\": true\n }\n }],\n staticClass: \"test6\"\n }, [_vm._v(\"v-drag.dragX=\\\"{dragOutX:60}\\\"\")])]), _vm._v(\" \"), _c('div', {\n staticClass: \"container\"\n }, [_c('h4', [_vm._v(\"向上拖动时，可拖动区域不会被拖出去,但是样式需要限制为，可拖动区域在顶部,且宽度与外层相等\")]), _vm._v(\" \"), _c('div', {\n staticClass: \"test4\",\n staticStyle: {\n \"width\": \"400px\"\n },\n attrs: {\n \"id\": \"test4-move3\"\n }\n }, [_c('div', {\n directives: [{\n name: \"drag\",\n rawName: \"v-drag.shaow\",\n value: ({\n moveElId: 'test4-move3',\n dragOutX: 15,\n dragOutY: 15\n }),\n expression: \"{ moveElId: 'test4-move3',dragOutX:15,dragOutY:15 }\",\n modifiers: {\n \"shaow\": true\n }\n }],\n staticClass: \"test4-drag\",\n staticStyle: {\n \"width\": \"400px\"\n }\n }, [_vm._v(\"v-drag=\\\"{ moveElId: 'test4-move3',dragOutX:15,dragOutY:15 }\\\"\")]), _vm._v(\" \"), _c('div', {\n staticClass: \"test4-content\"\n }, [_vm._v(\"\\n CONTENT\\n \")])])])])\n},staticRenderFns: [function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n return _c('div', [_c('h2', [_vm._v(\"一、注意！\")]), _vm._v(\" \"), _c('p', [_vm._v(\"1.拖动的元素，指令会自动加上position:absolute;\")]), _vm._v(\" \"), _c('p', [_vm._v(\"2.如果父元素没有使用position定位，那么指令会自动给父元素加上position:relative;\")]), _vm._v(\" \"), _c('p', [_vm._v(\"3.默认元素是无法拖出容器之外的\")]), _vm._v(\" \"), _c('p', {\n staticStyle: {\n \"color\": \"red\"\n }\n }, [_c('strong', [_vm._v(\"4.约定：拖动元素的父级必须是容器元素\")])]), _vm._v(\" \"), _c('p', {\n staticStyle: {\n \"color\": \"red\"\n }\n }, [_c('strong', [_vm._v(\"5.为了避免父子margin重叠造成高度计算误差，不要对拖拽元素使用margin属性。（注意：如果容器已经BFC化的话就无视这条，例如设置了overflow:hidden）\")])])])\n},function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n return _c('div', [_c('h2', [_vm._v(\"二、如何使用\")]), _vm._v(\" \"), _c('h3', [_vm._v(\"安装\")]), _vm._v(\" \"), _c('p', {\n staticStyle: {\n \"color\": \"blue\"\n }\n }, [_c('strong', [_vm._v(\"npm install vue-dragdrag --save-dev \")])]), _vm._v(\" \"), _c('p', {\n staticStyle: {\n \"color\": \"blue\"\n }\n }, [_c('strong', [_vm._v(\"import vueDragDrag from 'vue-dragdrag' \")])]), _vm._v(\" \"), _c('p', {\n staticStyle: {\n \"color\": \"blue\"\n }\n }, [_c('strong', [_vm._v(\"Vue.use(vueDragDrag)\")])]), _vm._v(\" \"), _c('h3', [_vm._v(\"vue指令使用\")]), _vm._v(\" \"), _c('p', {\n staticStyle: {\n \"color\": \"green\"\n }\n }, [_c('strong', [_vm._v(\"
\")])])])\n},function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n return _c('h4', [_vm._v(\"{ dragOutX:15,dragOutY:15 }代表有\"), _c('strong', {\n staticStyle: {\n \"color\": \"red\"\n }\n }, [_vm._v(\"上下和左右\")]), _vm._v(\"有15px的保留距离\")])\n},function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n return _c('h4', [_vm._v(\"如果值设置成 { dragOutX:15 }代表\"), _c('strong', {\n staticStyle: {\n \"color\": \"red\"\n }\n }, [_vm._v(\"只有左右\")]), _vm._v(\"15px的保留距离\")])\n}]}\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/vue-loader/lib/template-compiler.js?{\"id\":\"data-v-b87f08b8\"}!./~/vue-loader/lib/selector.js?type=template&index=0!./src/App.vue\n// module id = 10\n// module chunks = 0","// The Vue build version to load with the `import` command\n// (runtime-only or standalone) has been set in webpack.base.conf with an alias.\nimport Vue from 'vue'\nimport App from './App'\n\nimport vueDragDrag from './vue-dragdrag/vue-dragdrag.js'\nconsole.log(vueDragDrag)\nVue.use(vueDragDrag)\n\n/* eslint-disable no-new */\nnew Vue({\n el: '#app',\n template: '',\n components: { App }\n})\n\n\n\n// WEBPACK FOOTER //\n// ./src/main.js"],"sourceRoot":""} -------------------------------------------------------------------------------- /docs/static/js/manifest.724539638ec662d7c1bd.js: -------------------------------------------------------------------------------- 1 | !function(e){function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}var n=window.webpackJsonp;window.webpackJsonp=function(t,c,a){for(var i,u,f,s=0,l=[];s-1)return e.splice(n,1)}}function a(e,t){return ai.call(e,t)}function s(e){return"string"==typeof e||"number"==typeof e}function c(e){var t=Object.create(null);return function(n){var r=t[n];return r||(t[n]=e(n))}}function u(e,t){function n(n){var r=arguments.length;return r?r>1?e.apply(t,arguments):e.call(t,n):e.call(t)}return n._length=e.length,n}function l(e,t){t=t||0;for(var n=e.length-t,r=new Array(n);n--;)r[n]=e[n+t];return r}function f(e,t){for(var n in t)e[n]=t[n];return e}function p(e){return null!==e&&"object"==typeof e}function d(e){return pi.call(e)===di}function v(e){for(var t={},n=0;n1?l(n):n;for(var r=l(arguments,1),i=0,o=n.length;i=0&&Qi[n].id>e.id;)n--;Qi.splice(Math.max(n,no)+1,0,e)}else Qi.push(e);eo||(eo=!0,Si(Ae))}}function Se(e){oo.clear(),Te(e,oo)}function Te(e,t){var n,r,i=Array.isArray(e);if((i||p(e))&&Object.isExtensible(e)){if(e.__ob__){var o=e.__ob__.dep.id;if(t.has(o))return;t.add(o)}if(i)for(n=e.length;n--;)Te(e[n],t);else for(r=Object.keys(e),n=r.length;n--;)Te(e[r[n]],t)}}function Ee(e){e._watchers=[];var t=e.$options;t.props&&je(e,t.props),t.methods&&Le(e,t.methods),t.data?Ie(e):O(e._data={},!0),t.computed&&Ne(e,t.computed),t.watch&&De(e,t.watch)}function je(e,t){var n=e.$options.propsData||{},r=e.$options._propKeys=Object.keys(t),i=!e.$parent;Pi.shouldConvert=i;for(var o=function(i){var o=r[i];S(e,o,U(o,t,n,e))},a=0;a-1:e.test(t)}function Ge(e,t){for(var n in e){var r=e[n];if(r){var i=We(r.componentOptions);i&&!t(i)&&(Ye(r),e[n]=null)}}}function Ye(e){e&&(e.componentInstance._inactive||xe(e.componentInstance,"deactivated"),e.componentInstance.$destroy())}function Qe(e){var t={};t.get=function(){return mi},Object.defineProperty(e,"config",t),e.util=Bi,e.set=T,e.delete=E,e.nextTick=Si,e.options=Object.create(null),mi._assetTypes.forEach(function(t){e.options[t+"s"]=Object.create(null)}),e.options._base=e,f(e.options.components,lo),Ve(e),Je(e),qe(e),Ke(e)}function Xe(e){for(var t=e.data,n=e,r=e;r.componentInstance;)r=r.componentInstance._vnode,r.data&&(t=et(r.data,t));for(;n=n.parent;)n.data&&(t=et(t,n.data));return tt(t)}function et(e,t){return{staticClass:nt(e.staticClass,t.staticClass),class:e.class?[e.class,t.class]:t.class}}function tt(e){var t=e.class,n=e.staticClass;return n||t?nt(n,rt(t)):""}function nt(e,t){return e?t?e+" "+t:e:t||""}function rt(e){var t="";if(!e)return t;if("string"==typeof e)return e;if(Array.isArray(e)){for(var n,r=0,i=e.length;r-1?Oo[e]=t.constructor===window.HTMLUnknownElement||t.constructor===window.HTMLElement:Oo[e]=/HTMLUnknownElement/.test(t.toString())}function at(e){if("string"==typeof e){if(e=document.querySelector(e),!e)return document.createElement("div")}return e}function st(e,t){var n=document.createElement(e);return"select"!==e?n:(t.data&&t.data.attrs&&"multiple"in t.data.attrs&&n.setAttribute("multiple","multiple"),n)}function ct(e,t){return document.createElementNS(wo[e],t)}function ut(e){return document.createTextNode(e)}function lt(e){return document.createComment(e)}function ft(e,t,n){e.insertBefore(t,n)}function pt(e,t){e.removeChild(t)}function dt(e,t){e.appendChild(t)}function vt(e){return e.parentNode}function ht(e){return e.nextSibling}function mt(e){return e.tagName}function gt(e,t){e.textContent=t}function yt(e,t,n){e.setAttribute(t,n)}function _t(e,t){var n=e.data.ref;if(n){var r=e.context,i=e.componentInstance||e.elm,a=r.$refs;t?Array.isArray(a[n])?o(a[n],i):a[n]===i&&(a[n]=void 0):e.data.refInFor?Array.isArray(a[n])&&a[n].indexOf(i)<0?a[n].push(i):a[n]=[i]:a[n]=i}}function bt(e){return null==e}function $t(e){return null!=e}function wt(e,t){return e.key===t.key&&e.tag===t.tag&&e.isComment===t.isComment&&!e.data==!t.data}function Ct(e,t,n){var r,i,o={};for(r=t;r<=n;++r)i=e[r].key,$t(i)&&(o[i]=r);return o}function xt(e){function t(e){return new Hi(O.tagName(e).toLowerCase(),{},[],void 0,e)}function n(e,t){function n(){0===--n.listeners&&r(e)}return n.listeners=t,n}function r(e){var t=O.parentNode(e);t&&O.removeChild(t,e)}function o(e,t,n,r,i){if(e.isRootInsert=!i,!a(e,t,n,r)){var o=e.data,s=e.children,c=e.tag;$t(c)?(e.elm=e.ns?O.createElementNS(e.ns,c):O.createElement(c,e),v(e),f(e,s,t),$t(o)&&d(e,t),l(n,e.elm,r)):e.isComment?(e.elm=O.createComment(e.text),l(n,e.elm,r)):(e.elm=O.createTextNode(e.text),l(n,e.elm,r))}}function a(e,t,n,r){var i=e.data;if($t(i)){var o=$t(e.componentInstance)&&i.keepAlive;if($t(i=i.hook)&&$t(i=i.init)&&i(e,!1,n,r),$t(e.componentInstance))return c(e,t),o&&u(e,t,n,r),!0}}function c(e,t){e.data.pendingInsert&&t.push.apply(t,e.data.pendingInsert),e.elm=e.componentInstance.$el,p(e)?(d(e,t),v(e)):(_t(e),t.push(e))}function u(e,t,n,r){for(var i,o=e;o.componentInstance;)if(o=o.componentInstance._vnode,$t(i=o.data)&&$t(i=i.transition)){for(i=0;ip?(u=bt(n[m+1])?null:n[m+1].elm,h(e,u,n,f,m,r)):f>m&&g(e,t,l,p)}function b(e,t,n,r){if(e!==t){if(t.isStatic&&e.isStatic&&t.key===e.key&&(t.isCloned||t.isOnce))return t.elm=e.elm,void(t.componentInstance=e.componentInstance);var i,o=t.data,a=$t(o);a&&$t(i=o.hook)&&$t(i=i.prepatch)&&i(e,t);var s=t.elm=e.elm,c=e.children,u=t.children;if(a&&p(t)){for(i=0;i-1?t.split(/\s+/).forEach(function(t){return e.classList.add(t)}):e.classList.add(t);else{var n=" "+e.getAttribute("class")+" ";n.indexOf(" "+t+" ")<0&&e.setAttribute("class",(n+t).trim())}}function Jt(e,t){if(t&&t.trim())if(e.classList)t.indexOf(" ")>-1?t.split(/\s+/).forEach(function(t){return e.classList.remove(t)}):e.classList.remove(t);else{for(var n=" "+e.getAttribute("class")+" ",r=" "+t+" ";n.indexOf(r)>=0;)n=n.replace(r," ");e.setAttribute("class",n.trim())}}function qt(e){Xo(function(){Xo(e)})}function Kt(e,t){(e._transitionClasses||(e._transitionClasses=[])).push(t),Vt(e,t)}function Wt(e,t){e._transitionClasses&&o(e._transitionClasses,t),Jt(e,t)}function Zt(e,t,n){var r=Gt(e,t),i=r.type,o=r.timeout,a=r.propCount;if(!i)return n();var s=i===Ko?Go:Qo,c=0,u=function(){e.removeEventListener(s,l),n()},l=function(t){t.target===e&&++c>=a&&u()};setTimeout(function(){c0&&(n=Ko,l=a,f=o.length):t===Wo?u>0&&(n=Wo,l=u,f=c.length):(l=Math.max(a,u),n=l>0?a>u?Ko:Wo:null,f=n?n===Ko?o.length:c.length:0);var p=n===Ko&&ea.test(r[Zo+"Property"]);return{type:n,timeout:l,propCount:f,hasTransform:p}}function Yt(e,t){for(;e.length1,I=n._enterCb=nn(function(){E&&(Wt(n,k),Wt(n,x)),I.cancelled?(E&&Wt(n,C),T&&T(n)):S&&S(n),n._enterCb=null});e.data.show||ie(e.data.hook||(e.data.hook={}),"insert",function(){var t=n.parentNode,r=t&&t._pending&&t._pending[e.key];r&&r.tag===e.tag&&r.elm._leaveCb&&r.elm._leaveCb(),O&&O(n,I)},"transition-insert"),A&&A(n),E&&(Kt(n,C),Kt(n,x),qt(function(){Kt(n,k),Wt(n,C),I.cancelled||j||Zt(n,o,I)})),e.data.show&&(t&&t(),O&&O(n,I)),E||j||I()}}}function en(e,t){function n(){g.cancelled||(e.data.show||((r.parentNode._pending||(r.parentNode._pending={}))[e.key]=e),l&&l(r),h&&(Kt(r,s),Kt(r,u),qt(function(){Kt(r,c),Wt(r,s),g.cancelled||m||Zt(r,a,g)})),f&&f(r,g),h||m||g())}var r=e.elm;r._enterCb&&(r._enterCb.cancelled=!0,r._enterCb());var i=tn(e.data.transition);if(!i)return t();if(!r._leaveCb&&1===r.nodeType){var o=i.css,a=i.type,s=i.leaveClass,c=i.leaveToClass,u=i.leaveActiveClass,l=i.beforeLeave,f=i.leave,p=i.afterLeave,d=i.leaveCancelled,v=i.delayLeave,h=o!==!1&&!wi,m=f&&(f._length||f.length)>1,g=r._leaveCb=nn(function(){r.parentNode&&r.parentNode._pending&&(r.parentNode._pending[e.key]=null),h&&(Wt(r,c),Wt(r,u)),g.cancelled?(h&&Wt(r,s),d&&d(r)):(t(),p&&p(r)),r._leaveCb=null});v?v(n):n()}}function tn(e){if(e){if("object"==typeof e){var t={};return e.css!==!1&&f(t,ta(e.name||"v")),f(t,e),t}return"string"==typeof e?ta(e):void 0}}function nn(e){var t=!1;return function(){t||(t=!0,e())}}function rn(e,t){t.data.show||Xt(t)}function on(e,t,n){var r=t.value,i=e.multiple;if(!i||Array.isArray(r)){for(var o,a,s=0,c=e.options.length;s-1,a.selected!==o&&(a.selected=o);else if(g(sn(a),r))return void(e.selectedIndex!==s&&(e.selectedIndex=s));i||(e.selectedIndex=-1)}}function an(e,t){for(var n=0,r=t.length;n',n.innerHTML.indexOf(t)>0}function $n(e){return va=va||document.createElement("div"),va.innerHTML=e,va.textContent}function wn(e,t){return t&&(e=e.replace(ss,"\n")),e.replace(os,"<").replace(as,">").replace(cs,"&").replace(us,'"')}function Cn(e,t){function n(t){f+=t,e=e.substring(t)}function r(){var t=e.match(ka);if(t){var r={tagName:t[1],attrs:[],start:f};n(t[0].length);for(var i,o;!(i=e.match(Aa))&&(o=e.match(wa));)n(o[0].length),r.attrs.push(o);if(i)return r.unarySlash=i[1],n(i[0].length),r.end=f,r}}function i(e){var n=e.tagName,r=e.unarySlash;u&&("p"===s&&ya(n)&&o(s),ga(n)&&s===n&&o(n));for(var i=l(n)||"html"===n&&"head"===s||!!r,a=e.attrs.length,f=new Array(a),p=0;p=0&&c[i].lowerCasedTag!==o;i--);else i=0;if(i>=0){for(var a=c.length-1;a>=i;a--)t.end&&t.end(c[a].tag,n,r);c.length=i,s=i&&c[i-1].tag}else"br"===o?t.start&&t.start(e,[],!0,n,r):"p"===o&&(t.start&&t.start(e,[],!1,n,r),t.end&&t.end(e,n,r))}for(var a,s,c=[],u=t.expectHTML,l=t.isUnaryTag||vi,f=0;e;){if(a=e,s&&rs(s)){var p=s.toLowerCase(),d=is[p]||(is[p]=new RegExp("([\\s\\S]*?)(]*>)","i")),v=0,h=e.replace(d,function(e,n,r){return v=r.length,"script"!==p&&"style"!==p&&"noscript"!==p&&(n=n.replace(//g,"$1").replace(//g,"$1")),t.chars&&t.chars(n),""});f+=e.length-h.length,e=h,o(p,f-v,f)}else{var m=e.indexOf("<");if(0===m){if(Ta.test(e)){var g=e.indexOf("-->");if(g>=0){n(g+3);continue}}if(Ea.test(e)){var y=e.indexOf("]>");if(y>=0){n(y+2);continue}}var _=e.match(Sa);if(_){n(_[0].length);continue}var b=e.match(Oa);if(b){var $=f;n(b[0].length),o(b[1],$,f);continue}var w=r();if(w){i(w);continue}}var C=void 0,x=void 0,k=void 0;if(m>0){for(x=e.slice(m);!(Oa.test(x)||ka.test(x)||Ta.test(x)||Ea.test(x)||(k=x.indexOf("<",1),k<0));)m+=k,x=e.slice(m);C=e.substring(0,m),n(m)}m<0&&(C=e,e=""),t.chars&&C&&t.chars(C)}if(e===a&&t.chars){t.chars(e);break}}o()}function xn(e){function t(){(a||(a=[])).push(e.slice(v,i).trim()),v=i+1}var n,r,i,o,a,s=!1,c=!1,u=!1,l=!1,f=0,p=0,d=0,v=0;for(i=0;i=0&&(m=e.charAt(h)," "===m);h--);m&&/[\w$]/.test(m)||(l=!0)}}else void 0===o?(v=i+1,o=e.slice(0,i).trim()):t();if(void 0===o?o=e.slice(0,i).trim():0!==v&&t(),a)for(i=0;ia&&o.push(JSON.stringify(e.slice(a,i)));var s=xn(r[1].trim());o.push("_s("+s+")"),a=i+r[0].length}return a=Ia}function Rn(e){return 34===e||39===e}function Un(e){var t=1;for(Da=La;!Pn();)if(e=Dn(),Rn(e))Fn(e);else if(91===e&&t++,93===e&&t--,0===t){Pa=La;break}}function Fn(e){for(var t=e;!Pn()&&(e=Dn(),e!==t););}function Bn(e,t){Ra=t.warn||On,Ua=t.getTagNamespace||vi,Fa=t.mustUseProp||vi,Ba=t.isPreTag||vi,Ha=Sn(t.modules,"preTransformNode"),za=Sn(t.modules,"transformNode"),Va=Sn(t.modules,"postTransformNode"),Ja=t.delimiters;var n,r,i=[],o=t.preserveWhitespace!==!1,a=!1,s=!1;return Cn(e,{expectHTML:t.expectHTML,isUnaryTag:t.isUnaryTag,shouldDecodeNewlines:t.shouldDecodeNewlines,start:function(e,o,c){function u(e){}var l=r&&r.ns||Ua(e);$i&&"svg"===l&&(o=or(o));var f={type:1,tag:e,attrsList:o,attrsMap:rr(o),parent:r,children:[]};l&&(f.ns=l),ir(f)&&!Ai()&&(f.forbidden=!0);for(var p=0;p-1"+("true"===o?":("+t+")":":_q("+t+","+o+")")),In(e,"click","var $$a="+t+",$$el=$event.target,$$c=$$el.checked?("+o+"):("+a+");if(Array.isArray($$a)){var $$v="+(r?"_n("+i+")":i)+",$$i=_i($$a,$$v);if($$c){$$i<0&&("+t+"=$$a.concat($$v))}else{$$i>-1&&("+t+"=$$a.slice(0,$$i).concat($$a.slice($$i+1)))}}else{"+t+"=$$c}",null,!0)}function Kr(e,t,n){var r=n&&n.number,i=Nn(e,"value")||"null";i=r?"_n("+i+")":i,Tn(e,"checked","_q("+t+","+i+")"),In(e,"click",Gr(t,i),null,!0)}function Wr(e,t,n){var r=e.attrsMap.type,i=n||{},o=i.lazy,a=i.number,s=i.trim,c=o||$i&&"range"===r?"change":"input",u=!o&&"range"!==r,l="input"===e.tag||"textarea"===e.tag,f=l?"$event.target.value"+(s?".trim()":""):s?"(typeof $event === 'string' ? $event.trim() : $event)":"$event";f=a||"number"===r?"_n("+f+")":f;var p=Gr(t,f);l&&u&&(p="if($event.target.composing)return;"+p),Tn(e,"value",l?"_s("+t+")":"("+t+")"),In(e,c,p,null,!0),(s||a||"number"===r)&&In(e,"blur","$forceUpdate()")}function Zr(e,t,n){var r=n&&n.number,i='Array.prototype.filter.call($event.target.options,function(o){return o.selected}).map(function(o){var val = "_value" in o ? o._value : o.value;return '+(r?"_n(val)":"val")+"})"+(null==e.attrsMap.multiple?"[0]":""),o=Gr(t,i);In(e,"change",o,null,!0)}function Gr(e,t){var n=Ln(e);return null===n.idx?e+"="+t:"var $$exp = "+n.exp+", $$idx = "+n.idx+";if (!Array.isArray($$exp)){"+e+"="+t+"}else{$$exp.splice($$idx, 1, "+t+")}"}function Yr(e,t){t.value&&Tn(e,"textContent","_s("+t.value+")")}function Qr(e,t){t.value&&Tn(e,"innerHTML","_s("+t.value+")")}function Xr(e,t){return t=t?f(f({},Ms),t):Ms,Fr(e,t)}function ei(e,t,n){var r=(t&&t.warn||Ei,t&&t.delimiters?String(t.delimiters)+e:e);if(Ns[r])return Ns[r];var i={},o=Xr(e,t);i.render=ti(o.render);var a=o.staticRenderFns.length;i.staticRenderFns=new Array(a);for(var s=0;s0,Ci=bi&&bi.indexOf("edge/")>0,xi=bi&&bi.indexOf("android")>0,ki=bi&&/iphone|ipad|ipod|ios/.test(bi),Ai=function(){return void 0===ri&&(ri=!_i&&"undefined"!=typeof t&&"server"===t.process.env.VUE_ENV),ri},Oi=_i&&window.__VUE_DEVTOOLS_GLOBAL_HOOK__,Si=function(){function e(){r=!1;var e=n.slice(0);n.length=0;for(var t=0;t1&&(t[n[0].trim()]=n[1].trim())}}),t}),Fo=/^--/,Bo=/\s*!important$/,Ho=function(e,t,n){Fo.test(t)?e.style.setProperty(t,n):Bo.test(n)?e.style.setProperty(t,n.replace(Bo,""),"important"):e.style[Vo(t)]=n},zo=["Webkit","Moz","ms"],Vo=c(function(e){if(po=po||document.createElement("div"),e=ci(e),"filter"!==e&&e in po.style)return e;for(var t=e.charAt(0).toUpperCase()+e.slice(1),n=0;n\/=]+)/,ba=/(?:=)/,$a=[/"([^"]*)"+/.source,/'([^']*)'+/.source,/([^\s"'=<>`]+)/.source],wa=new RegExp("^\\s*"+_a.source+"(?:\\s*("+ba.source+")\\s*(?:"+$a.join("|")+"))?"),Ca="[a-zA-Z_][\\w\\-\\.]*",xa="((?:"+Ca+"\\:)?"+Ca+")",ka=new RegExp("^<"+xa),Aa=/^\s*(\/?)>/,Oa=new RegExp("^<\\/"+xa+"[^>]*>"),Sa=/^]+>/i,Ta=/^ 10 | 11 | 12 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 |  2 | (function () { 3 | var vueDragDrag = {} 4 | 5 | vueDragDrag.install = function (Vue) { 6 | Vue.directive('drag', { 7 | inserted: function (el, binding) { 8 | 9 | // 拖拽时的手势 10 | el.style.cursor = binding.value && binding.value.cursor ? binding.value.cursor : 'default' 11 | 12 | // 如果拖动元素非元素本身（el），传入id 13 | var moveEl = binding.value && binding.value.moveElId ? document.getElementById(binding.value.moveElId) : el 14 | // 为拖动元素添加绝对定位 15 | moveEl.style.position = 'absolute' 16 | 17 | // 如果容器为设置position属性，默认为 position = 'relative' 18 | if (getComputedStyle(moveEl.parentNode, null).position === 'static') { 19 | moveEl.parentNode.style.position = 'relative' 20 | } 21 | 22 | var mouseDownFn = function (e) { 23 | 24 | //.shaow---------- 复制节点，并且插入容器中原来位置 25 | if (binding.modifiers.shaow) { 26 | var newNode = moveEl.cloneNode(true) 27 | moveEl.style.opacity = '0.5' 28 | moveEl.parentNode.appendChild(newNode) 29 | } 30 | //---------- 31 | 32 | 33 | var disX, disY 34 | if (!binding.modifiers.dragY) disX = e.clientX - moveEl.offsetLeft 35 | if (!binding.modifiers.dragX) disY = e.clientY - moveEl.offsetTop 36 | var mouseMoveFn = function (e) { 37 | e.preventDefault() 38 | var left = e.clientX - disX 39 | var top = e.clientY - disY 40 | 41 | // 可以拖出去的元素的剩余宽度 42 | // dragOutX 43 | var limitWidth = binding.value && binding.value.dragOutX ? moveEl.offsetWidth - binding.value.dragOutX : 0 44 | // dragOutY 45 | if (binding.value && binding.value.dragOutY) { 46 | var limitHeigth = moveEl.offsetHeight - binding.value.dragOutY 47 | // 防止可拖拽区域被拖出容器区域 48 | // 拖拽元素在顶部 49 | var limitHeigthTop = el.offsetHeight - binding.value.dragOutY 50 | } else { 51 | var limitHeigth = 0 52 | var limitHeigthTop = 0 53 | } 54 | 55 | 56 | if (left < 0 - limitWidth) { 57 | left = 0 - limitWidth 58 | } 59 | else if (left > moveEl.parentNode.clientWidth - moveEl.offsetWidth + limitWidth) { 60 | left = moveEl.parentNode.clientWidth - moveEl.offsetWidth + limitWidth 61 | } 62 | 63 | if (top < 0 - limitHeigthTop) { 64 | top = 0 - limitHeigthTop 65 | } 66 | else if (top > moveEl.parentNode.clientHeight - moveEl.offsetHeight + limitHeigth) { 67 | top = moveEl.parentNode.clientHeight - moveEl.offsetHeight + limitHeigth; 68 | } 69 | moveEl.style.left = left + 'px' 70 | moveEl.style.top = top + 'px' 71 | 72 | // 拖拽事件 73 | if (binding.value && binding.value.ondrag) { 74 | if (typeof binding.value.ondrag != 'function') throw 'ondrag: should be a function' 75 | binding.value.ondrag(e, { left: left, top: top }) 76 | } 77 | 78 | } 79 | // mousemove 80 | document.addEventListener('mousemove', mouseMoveFn) 81 | 82 | var mouseUpFn = function () { 83 | 84 | // 移除临时shaow节点 85 | if (newNode) { 86 | moveEl.style.opacity = '1' 87 | newNode.parentNode.removeChild(newNode) 88 | } 89 | document.removeEventListener('mousemove', mouseMoveFn) 90 | document.removeEventListener('mouseup', mouseUpFn) 91 | } 92 | // mouseup 93 | document.addEventListener('mouseup', mouseUpFn) 94 | } 95 | 96 | // mousedown 97 | el.addEventListener('mousedown', mouseDownFn) 98 | 99 | } 100 | }) 101 | } 102 | 103 | // 输出 104 | if (typeof exports == "object") { 105 | module.exports = vueDragDrag; 106 | } else if (typeof define == "function" && define.amd) { 107 | define([], function () { 108 | return vueDragDrag 109 | }) 110 | } else if (window.Vue) { 111 | window.vueDragDrag = vueDragDrag; 112 | Vue.use(vueDragDrag); 113 | } 114 | })(); 115 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-dragdrag", 3 | "version": "1.0.4", 4 | "description": "vue2 drag directive", 5 | "main": "index.js", 6 | "author": "lfyfly <410793635@qq.com>", 7 | "repository": { 8 | "type": "git", 9 | "url": "git+https://github.com/lfyfly/vue-dragdrag.git" 10 | }, 11 | "keywords": [ 12 | "vue2", 13 | "drag", 14 | "draggable" 15 | ], 16 | "license": "MIT", 17 | "bugs": { 18 | "url": "https://github.com/lfyfly/vue-dragdrag/issues" 19 | }, 20 | "homepage": "https://github.com/lfyfly/vue-dragdrag#readme", 21 | "scripts": { 22 | "dev": "node build/dev-server.js", 23 | "build": "node build/build.js" 24 | }, 25 | "dependencies": { 26 | "node-sass": "^4.5.0", 27 | "vue": "^2.1.10" 28 | }, 29 | "devDependencies": { 30 | "autoprefixer": "^6.7.2", 31 | "babel-core": "^6.22.1", 32 | "babel-loader": "^6.2.10", 33 | "babel-plugin-transform-runtime": "^6.22.0", 34 | "babel-preset-es2015": "^6.22.0", 35 | "babel-preset-stage-2": "^6.22.0", 36 | "babel-register": "^6.22.0", 37 | "chalk": "^1.1.3", 38 | "connect-history-api-fallback": "^1.3.0", 39 | "css-loader": "^0.26.1", 40 | "eventsource-polyfill": "^0.9.6", 41 | "express": "^4.14.1", 42 | "extract-text-webpack-plugin": "^2.0.0-rc.2", 43 | "file-loader": "^0.10.0", 44 | "friendly-errors-webpack-plugin": "^1.1.3", 45 | "function-bind": "^1.1.0", 46 | "html-webpack-plugin": "^2.28.0", 47 | "http-proxy-middleware": "^0.17.3", 48 | "opn": "^4.0.2", 49 | "optimize-css-assets-webpack-plugin": "^1.3.0", 50 | "ora": "^1.1.0", 51 | "pug": "^2.0.0-beta11", 52 | "sass-loader": "^6.0.1", 53 | "semver": "^5.3.0", 54 | "shelljs": "^0.7.6", 55 | "url-loader": "^0.5.7", 56 | "vue-loader": "^11.0.0", 57 | "vue-style-loader": "^2.0.0", 58 | "vue-template-compiler": "^2.1.10", 59 | "webpack": "^2.2.1", 60 | "webpack-bundle-analyzer": "^2.2.1", 61 | "webpack-dev-middleware": "^1.10.0", 62 | "webpack-hot-middleware": "^2.16.1", 63 | "webpack-merge": "^2.6.1" 64 | }, 65 | "engines": { 66 | "node": ">= 4.0.0", 67 | "npm": ">= 3.0.0" 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 129 | 130 | 150 | 151 | 223 | -------------------------------------------------------------------------------- /src/components/Hello.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | 18 | 19 | 24 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | // The Vue build version to load with the `import` command 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 | import Vue from 'vue' 4 | import App from './App' 5 | 6 | import vueDragDrag from './vue-dragdrag/vue-dragdrag.js' 7 | console.log(vueDragDrag) 8 | Vue.use(vueDragDrag) 9 | 10 | /* eslint-disable no-new */ 11 | new Vue({ 12 | el: '#app', 13 | template: '', 14 | components: { App } 15 | }) 16 | -------------------------------------------------------------------------------- /src/vue-dragdrag/vue-dragdrag.js: -------------------------------------------------------------------------------- 1 | 2 | // (function () { 3 | var vueDragDrag = {} 4 | 5 | vueDragDrag.install = function (Vue) { 6 | Vue.directive('drag', { 7 | inserted: function (el, binding) { 8 | // 拖拽时的手势 9 | el.style.cursor = binding.value && binding.value.cursor ? binding.value.cursor : 'default' 10 | 11 | // 如果拖动元素非元素本身（el），传入id 12 | var moveEl = binding.value && binding.value.moveElId ? document.getElementById(binding.value.moveElId) : el 13 | // 为拖动元素添加绝对定位 14 | moveEl.style.position = 'absolute' 15 | 16 | // 如果容器为设置position属性，默认为 position = 'relative' 17 | if (getComputedStyle(moveEl.parentNode, null).position === 'static') { 18 | moveEl.parentNode.style.position = 'relative' 19 | } 20 | 21 | var mouseDownFn = function (e) { 22 | 23 | //.shaow---------- 复制节点，并且插入容器中原来位置 24 | if (binding.modifiers.shaow) { 25 | var newNode = moveEl.cloneNode(true) 26 | moveEl.style.opacity = '0.5' 27 | moveEl.parentNode.appendChild(newNode) 28 | } 29 | //---------- 30 | 31 | 32 | var disX, disY 33 | if (!binding.modifiers.dragY) disX = e.clientX - moveEl.offsetLeft 34 | if (!binding.modifiers.dragX) disY = e.clientY - moveEl.offsetTop 35 | var mouseMoveFn = function (e) { 36 | e.preventDefault() 37 | var left = e.clientX - disX 38 | var top = e.clientY - disY 39 | 40 | // 可以拖出去的元素的剩余宽度 41 | // dragOutX 42 | var limitWidth = binding.value && binding.value.dragOutX ? moveEl.offsetWidth - binding.value.dragOutX : 0 43 | // dragOutY 44 | if (binding.value && binding.value.dragOutY) { 45 | var limitHeigth = moveEl.offsetHeight - binding.value.dragOutY 46 | // 防止可拖拽区域被拖出容器区域 47 | // 拖拽元素在顶部 48 | var limitHeigthTop = el.offsetHeight - binding.value.dragOutY 49 | } else { 50 | var limitHeigth = 0 51 | var limitHeigthTop = 0 52 | } 53 | 54 | 55 | if (left < 0 - limitWidth) { 56 | left = 0 - limitWidth 57 | } 58 | else if (left > moveEl.parentNode.clientWidth - moveEl.offsetWidth + limitWidth) { 59 | left = moveEl.parentNode.clientWidth - moveEl.offsetWidth + limitWidth 60 | } 61 | 62 | if (top < 0 - limitHeigthTop) { 63 | top = 0 - limitHeigthTop 64 | } 65 | else if (top > moveEl.parentNode.clientHeight - moveEl.offsetHeight + limitHeigth) { 66 | top = moveEl.parentNode.clientHeight - moveEl.offsetHeight + limitHeigth; 67 | } 68 | moveEl.style.left = left + 'px' 69 | moveEl.style.top = top + 'px' 70 | 71 | // 拖拽事件 72 | if (binding.value && binding.value.ondrag) { 73 | if (typeof binding.value.ondrag != 'function') throw 'ondrag: should be a function' 74 | binding.value.ondrag(e, { left: left, top: top }) 75 | } 76 | 77 | } 78 | // mousemove 79 | document.addEventListener('mousemove', mouseMoveFn) 80 | 81 | var mouseUpFn = function () { 82 | 83 | // 移除临时shaow节点 84 | if (newNode) { 85 | moveEl.style.opacity = '1' 86 | newNode.parentNode.removeChild(newNode) 87 | } 88 | document.removeEventListener('mousemove', mouseMoveFn) 89 | document.removeEventListener('mouseup', mouseUpFn) 90 | } 91 | // mouseup 92 | document.addEventListener('mouseup', mouseUpFn) 93 | } 94 | 95 | // mousedown 96 | el.addEventListener('mousedown', mouseDownFn) 97 | 98 | } 99 | }) 100 | } 101 | 102 | // 输出 103 | // if (typeof exports == "object") { 104 | // module.exports = vueDragDrag; 105 | // } else if (typeof define == "function" && define.amd) { 106 | // define([], function () { 107 | // return vueDragDrag 108 | // }) 109 | // } else if (window.Vue) { 110 | // window.vueDragDrag = vueDragDrag; 111 | // Vue.use(vueDragDrag); 112 | // } 113 | // })(); 114 | export default vueDragDrag 115 | -------------------------------------------------------------------------------- /static/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lfyfly/vue-dragdrag/62dd2d2d6867bd678b2a7cf457d17ba665c91ac9/static/.gitkeep -------------------------------------------------------------------------------- /static/css/reset.css: -------------------------------------------------------------------------------- 1 | body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td { margin:0; padding:0; } 2 | 3 | body { color:#555; font-size:14px; font-family: Verdana, Arial, Helvetica, sans-serif; } 4 | 5 | a { color:#555; text-decoration:none; } 6 | 7 | li{list-style:none;} 8 | 9 | .clearfix:after {content: "."; display: block; height:0; clear:both; visibility: hidden;} 10 | .clearfix { *zoom:1; } -------------------------------------------------------------------------------- /vue-cli-README.md: -------------------------------------------------------------------------------- 1 | # vue_origin 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | 17 | # build for production and view the bundle analyzer report 18 | npm run build --report 19 | ``` 20 | 21 | For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader). 22 | --------------------------------------------------------------------------------