├── .babelrc ├── .editorconfig ├── .eslintignore ├── .eslintrc ├── .gitattributes ├── .gitignore ├── LICENSE ├── README.md ├── demo ├── build │ └── webpack.config.js ├── dist │ ├── 01.jpg │ ├── 02.jpg │ ├── 03.jpg │ ├── 04.jpg │ ├── 05.jpg │ ├── 06.jpg │ ├── 07.jpg │ ├── index-33eddf4451f3293263490355b0aa958e.css │ ├── index-33eddf4451f3293263490355b0aa958e.css.map │ ├── index.html │ ├── js │ │ ├── main-96c6b3ac7ed2843966f7.js │ │ └── main-96c6b3ac7ed2843966f7.js.map │ └── rbg.jpg └── src │ ├── app.vue │ ├── assest │ ├── css │ │ └── index.css │ └── img │ │ ├── 01.jpg │ │ ├── 02.jpg │ │ ├── 03.jpg │ │ ├── 04.jpg │ │ ├── 05.jpg │ │ ├── 06.jpg │ │ ├── 07.jpg │ │ └── rbg.jpg │ ├── index.template.html │ └── main.js ├── dist ├── vue-xdraggable.js ├── vue-xdraggable.js.map ├── vue-xdraggable.min.js └── vue-xdraggable.min.js.map ├── gulpfile.js ├── package-lock.json ├── package.json ├── src ├── index.js ├── index.spec.js ├── install.js └── xdraggable.vue └── umdDemo ├── css └── index.css ├── img ├── 01.jpg ├── 02.jpg ├── 03.jpg ├── 04.jpg ├── 05.jpg ├── 06.jpg ├── 07.jpg └── rbg.jpg └── index.html /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["es2015",{ "modules": false }], 4 | "stage-0", 5 | "flow"] 6 | } 7 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | end_of_line = crlf 5 | insert_final_newline = true 6 | indent_style = space 7 | indent_size = 4 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | dist/** 2 | node_modules/** 3 | demo/build/** -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "commonjs": true, 5 | "es6": true 6 | }, 7 | "extends": ["eslint:recommended"], 8 | "parserOptions": { 9 | "ecmaFeatures": { 10 | "experimentalObjectRestSpread": true 11 | }, 12 | "sourceType": "module" 13 | }, 14 | "plugins": ["vue"], 15 | "globals": { 16 | "window": true 17 | }, 18 | "settings": { 19 | "flowtype": { 20 | "onlyFilesWithFlowAnnotation": true 21 | } 22 | }, 23 | "rules": { 24 | "indent": [ 25 | "error", 26 | 4 27 | ], 28 | "quotes": [ 29 | "error", 30 | "single" 31 | ], 32 | "semi": [ 33 | "error", 34 | "always" 35 | ] 36 | } 37 | } -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Handle line endings automatically for files detected as text 2 | # and leave all files detected as binary untouched. 3 | * text=auto eol=crlf 4 | 5 | .gitattributes text 6 | .gitignore text 7 | *.md text -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Runtime data 7 | pids 8 | *.pid 9 | *.seed 10 | 11 | # Directory for instrumented libs generated by jscoverage/JSCover 12 | lib-cov 13 | 14 | # Coverage directory used by tools like istanbul 15 | coverage 16 | 17 | # nyc test coverage 18 | .nyc_output 19 | 20 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 21 | .grunt 22 | 23 | # node-waf configuration 24 | .lock-wscript 25 | 26 | # Compiled binary addons (http://nodejs.org/api/addons.html) 27 | build/Release 28 | 29 | # Project build folder 30 | # dist 31 | 32 | # Dependency directories 33 | node_modules 34 | bower_components 35 | jspm_packages 36 | 37 | # Optional npm cache directory 38 | .npm 39 | 40 | # Optional REPL history 41 | .node_repl_history 42 | 43 | # KDiff original file 44 | *.orig 45 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2017 丁少雄 (https://github.com/shaoxiong789) 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 13 | all 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 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-xdraggable [![NPM version][npm-image]][npm-url] 2 | 3 | > 4 | 5 | ## Installation 6 | 7 | ```sh 8 | $ npm install --save vue-xdraggable 9 | ``` 10 | 11 | ## Usage 12 | * 支持模块化加载和浏览器中直接引入使用 13 | ```js 14 | import xdraggable from 'vue-xdraggable/src/xdraggable.vue'; 15 | // OR 16 | import xdraggable from 'vue-xdraggable'; 17 | Vue.use(xdraggable) 18 | // OR 19 | 20 | 21 | ``` 22 | 23 | ## Example 24 | [Demo Page](https://shaoxiong789.github.io/vue-xdraggable/demo/dist/) 25 | 26 | ## Code Demo 27 | ```vue 28 | 83 | 111 | 119 | ``` 120 | 121 | ## License 122 | 123 | MIT © [丁少雄](https://github.com/shaoxiong789) 124 | 125 | 126 | [npm-image]: https://badge.fury.io/js/vue-xdraggable.svg 127 | [npm-url]: https://npmjs.org/package/vue-xdraggable 128 | 129 | -------------------------------------------------------------------------------- /demo/build/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 3 | const ExtractTextPlugin = require('extract-text-webpack-plugin'); 4 | 5 | module.exports = { 6 | entry: './demo/src/main.js', 7 | output: { 8 | path: path.resolve(__dirname,'../dist'), 9 | filename: 'js/[name]-[hash].js' 10 | }, 11 | resolve: { 12 | alias: { 13 | 'vue': 'vue/dist/vue.js' 14 | } 15 | }, 16 | module: { 17 | rules: [ 18 | { 19 | test: /\.js$/, 20 | exclude: /node_modules/, 21 | loaders: [ 22 | 'babel-loader' 23 | ] 24 | }, 25 | { 26 | test: /\.vue$/, 27 | loaders: [ 28 | 'vue-loader' 29 | ] 30 | }, 31 | { 32 | test: /\.(css|scss)$/, 33 | loaders: ExtractTextPlugin.extract({ 34 | fallback: 'style-loader', 35 | use: 'css-loader?minimize' 36 | }) 37 | }, 38 | { 39 | test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/, 40 | loader: 'file-loader', 41 | query: { 42 | name: '[name].[ext]?[hash]' 43 | } 44 | }, 45 | { 46 | test: /\.(js|vue)$/, 47 | enforce: 'pre', // 在babel-loader对源码进行编译前进行lint的检查 48 | use: [{ 49 | loader: 'eslint-loader', 50 | options: { 51 | formatter: require('eslint-friendly-formatter') // 编译后错误报告格式 52 | } 53 | }] 54 | } 55 | ] 56 | }, 57 | plugins: [ 58 | new ExtractTextPlugin('index-[contenthash].css'), 59 | new HtmlWebpackPlugin({ 60 | template: 'demo/src/index.template.html', 61 | filename: 'index.html' 62 | }), 63 | ], 64 | devtool: 'source-map' 65 | }; -------------------------------------------------------------------------------- /demo/dist/01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaoxiong789/vue-xdraggable/09c8a7761f566430fd0054fbca8312cac1e49a2c/demo/dist/01.jpg -------------------------------------------------------------------------------- /demo/dist/02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaoxiong789/vue-xdraggable/09c8a7761f566430fd0054fbca8312cac1e49a2c/demo/dist/02.jpg -------------------------------------------------------------------------------- /demo/dist/03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaoxiong789/vue-xdraggable/09c8a7761f566430fd0054fbca8312cac1e49a2c/demo/dist/03.jpg -------------------------------------------------------------------------------- /demo/dist/04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaoxiong789/vue-xdraggable/09c8a7761f566430fd0054fbca8312cac1e49a2c/demo/dist/04.jpg -------------------------------------------------------------------------------- /demo/dist/05.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaoxiong789/vue-xdraggable/09c8a7761f566430fd0054fbca8312cac1e49a2c/demo/dist/05.jpg -------------------------------------------------------------------------------- /demo/dist/06.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaoxiong789/vue-xdraggable/09c8a7761f566430fd0054fbca8312cac1e49a2c/demo/dist/06.jpg -------------------------------------------------------------------------------- /demo/dist/07.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaoxiong789/vue-xdraggable/09c8a7761f566430fd0054fbca8312cac1e49a2c/demo/dist/07.jpg -------------------------------------------------------------------------------- /demo/dist/index-33eddf4451f3293263490355b0aa958e.css: -------------------------------------------------------------------------------- 1 | *{margin:0;padding:0}li{list-style:none outside none}body{background:url(rbg.jpg?2253f189b970bd8c8ad3ce5e9c5c6abb) repeat scroll 0 0 #aaa;font-family:\\E5\AE\2039\E4\BD\201C;padding:50px 0 300px}.box{width:1000px;margin:0 auto 20px;height:500px;background:#3bb3e0;border:5px solid #2561b4}p{font-size:20px;color:#333;text-align:center;margin:0 0 20px}.box.box-1{height:200px}.box-1 dl{top:25px}.box.box-2{height:500px}i.hander{display:block;width:100%;height:25px;background:#ccc;text-align:center;font-size:12px;color:#333;line-height:25px;font-style:normal} 2 | /*# sourceMappingURL=index-33eddf4451f3293263490355b0aa958e.css.map*/ -------------------------------------------------------------------------------- /demo/dist/index-33eddf4451f3293263490355b0aa958e.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":[],"names":[],"mappings":"","file":"index-33eddf4451f3293263490355b0aa958e.css","sourceRoot":""} -------------------------------------------------------------------------------- /demo/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | VueDrag - rely on Vue.js 7 | 8 | 9 | 10 |
11 | 12 |
13 | 14 | -------------------------------------------------------------------------------- /demo/dist/rbg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaoxiong789/vue-xdraggable/09c8a7761f566430fd0054fbca8312cac1e49a2c/demo/dist/rbg.jpg -------------------------------------------------------------------------------- /demo/src/app.vue: -------------------------------------------------------------------------------- 1 | 56 | 84 | -------------------------------------------------------------------------------- /demo/src/assest/css/index.css: -------------------------------------------------------------------------------- 1 | *{margin:0;padding:0;} 2 | li{list-style:none outside none;} 3 | body{background:url(../img/rbg.jpg) repeat scroll 0 0 #aaa;font-family:"宋体";padding:50px 0 300px;} 4 | 5 | .box{width:1000px;margin:0 auto 20px;height:500px;background:#3bb3e0;border:5px solid #2561b4;} 6 | p{font-size:20px;color:#333;text-align:center;margin:0 0 20px;} 7 | .box.box-1{height:200px}.box-1 dl{top:25px;} 8 | .box.box-2{height:500px} 9 | /*.box-2 dl{left:50%;margin-left:-75px;}*/ 10 | i.hander{display:block;width:100%;height:25px;background:#ccc;text-align:center;font-size:12px;color:#333;line-height:25px;font-style:normal;} -------------------------------------------------------------------------------- /demo/src/assest/img/01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaoxiong789/vue-xdraggable/09c8a7761f566430fd0054fbca8312cac1e49a2c/demo/src/assest/img/01.jpg -------------------------------------------------------------------------------- /demo/src/assest/img/02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaoxiong789/vue-xdraggable/09c8a7761f566430fd0054fbca8312cac1e49a2c/demo/src/assest/img/02.jpg -------------------------------------------------------------------------------- /demo/src/assest/img/03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaoxiong789/vue-xdraggable/09c8a7761f566430fd0054fbca8312cac1e49a2c/demo/src/assest/img/03.jpg -------------------------------------------------------------------------------- /demo/src/assest/img/04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaoxiong789/vue-xdraggable/09c8a7761f566430fd0054fbca8312cac1e49a2c/demo/src/assest/img/04.jpg -------------------------------------------------------------------------------- /demo/src/assest/img/05.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaoxiong789/vue-xdraggable/09c8a7761f566430fd0054fbca8312cac1e49a2c/demo/src/assest/img/05.jpg -------------------------------------------------------------------------------- /demo/src/assest/img/06.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaoxiong789/vue-xdraggable/09c8a7761f566430fd0054fbca8312cac1e49a2c/demo/src/assest/img/06.jpg -------------------------------------------------------------------------------- /demo/src/assest/img/07.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaoxiong789/vue-xdraggable/09c8a7761f566430fd0054fbca8312cac1e49a2c/demo/src/assest/img/07.jpg -------------------------------------------------------------------------------- /demo/src/assest/img/rbg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaoxiong789/vue-xdraggable/09c8a7761f566430fd0054fbca8312cac1e49a2c/demo/src/assest/img/rbg.jpg -------------------------------------------------------------------------------- /demo/src/index.template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | VueDrag - rely on Vue.js 7 | 8 | 9 | 10 |
11 | 12 |
13 | 14 | -------------------------------------------------------------------------------- /demo/src/main.js: -------------------------------------------------------------------------------- 1 | import './assest/css/index.css'; 2 | import Vue from 'vue'; 3 | import App from './app.vue'; 4 | new Vue({ 5 | el:'#app', 6 | components:{ 7 | App 8 | } 9 | }); -------------------------------------------------------------------------------- /dist/vue-xdraggable.js: -------------------------------------------------------------------------------- 1 | (function (global, factory) { 2 | typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : 3 | typeof define === 'function' && define.amd ? define(factory) : 4 | (global.VueXdraggable = factory()); 5 | }(this, (function () { 'use strict'; 6 | 7 | var Xdraggable = { 8 | render: function render() { 9 | var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('div', [_vm._t("default")], 2); 10 | }, 11 | staticRenderFns: [], 12 | props: { 13 | move: { 14 | type: String, 15 | default: 'both' 16 | }, 17 | randomPosition: { 18 | type: Boolean, 19 | default: false 20 | } 21 | }, 22 | data: function data() { 23 | return { 24 | left: null, 25 | top: null, 26 | //元素到鼠标的距离 27 | pos: { 28 | x: null, 29 | y: null 30 | }, 31 | //桌子的宽高 32 | desk: { 33 | width: null, 34 | height: null 35 | }, 36 | //移动物体的宽高 37 | animal: { 38 | width: null, 39 | height: null 40 | }, 41 | status: { 42 | dragging: false 43 | } 44 | }; 45 | }, 46 | 47 | watch: { 48 | left: function left(val) { 49 | this.$el.style.left = val + 'px'; 50 | }, 51 | top: function top(val) { 52 | this.$el.style.top = val + 'px'; 53 | } 54 | }, 55 | mounted: function mounted() { 56 | var _this = this; 57 | 58 | //初始化桌子的宽高 59 | this.desk.width = this.$el.parentNode.clientWidth; 60 | this.desk.height = this.$el.parentNode.clientHeight; 61 | //初始化移动物的宽高 62 | this.animal.width = this.$el.clientWidth; 63 | this.animal.height = this.$el.clientHeight; 64 | var handle = this.$el.querySelector('[handle]') ? this.$el.querySelector('[handle]') : this.$el; 65 | //初始化随机位置 66 | if (this.randomPosition) { 67 | this.$el.style.left = Math.floor(Math.random() * (this.desk.width - this.animal.width)) + 'px'; 68 | this.$el.style.top = Math.floor(Math.random() * (this.desk.height - this.animal.height)) + 'px'; 69 | } 70 | this.left = this.$el.offsetLeft; 71 | this.top = this.$el.offsetTop; 72 | handle.addEventListener('mousedown', function (e) { 73 | _this.$emit('dragstart', e); 74 | _this.status.dragging = true; 75 | _this.pos.x = e.clientX - _this.left; 76 | _this.pos.y = e.clientY - _this.top; 77 | }); 78 | document.addEventListener('mousemove', this.mousemoveObserver); 79 | document.addEventListener('mouseup', this.mouseupObserver); 80 | }, 81 | 82 | methods: { 83 | mousemoveObserver: function mousemoveObserver(e) { 84 | e.preventDefault(); 85 | if (this.status.dragging == true) { 86 | this.$emit('dragging', e); 87 | if (this.move == 'x' || this.move == 'both') { 88 | var left = e.clientX - this.pos.x > 0 ? e.clientX - this.pos.x : 0; 89 | if (left > this.desk.width - this.animal.width) { 90 | left = this.desk.width - this.animal.width; 91 | } 92 | this.left = left; 93 | } 94 | if (this.move == 'y' || this.move == 'both') { 95 | var top = e.clientY - this.pos.y > 0 ? e.clientY - this.pos.y : 0; 96 | if (top > this.desk.height - this.animal.height) { 97 | top = this.desk.height - this.animal.height; 98 | } 99 | this.top = top; 100 | } 101 | } 102 | }, 103 | mouseupObserver: function mouseupObserver(e) { 104 | if (this.status.dragging == true) { 105 | this.$emit('dragend', e); 106 | } 107 | this.status.dragging = false; 108 | } 109 | }, 110 | beforeDestroy: function beforeDestroy() { 111 | document.removeEventListener('mousemove', this.mousemoveObserver); 112 | document.removeEventListener('mouseup', this.mouseupObserver); 113 | } 114 | }; 115 | 116 | var state = false; 117 | 118 | var install$1 = function (Vue) { 119 | if (state) return; 120 | state = true; 121 | Vue.component('xdraggable', Xdraggable); 122 | }; 123 | 124 | if (typeof window !== 'undefined' && window.Vue) { 125 | install$1(window.Vue); 126 | } 127 | 128 | return install$1; 129 | 130 | }))); 131 | //# sourceMappingURL=vue-xdraggable.js.map 132 | -------------------------------------------------------------------------------- /dist/vue-xdraggable.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"vue-xdraggable.js","sources":["../src/xdraggable.vue","../src/install.js","../src/index.js"],"sourcesContent":["\n\n\n\n","import Xdraggable from './xdraggable.vue';\nvar state = false;\n\nexport default function (Vue) {\n if (state) return;\n state = true;\n Vue.component('xdraggable', Xdraggable);\n}","import install from './install';\r\n\r\nif (typeof window !== 'undefined' && window.Vue) {\r\n install(window.Vue);\r\n}\r\n\r\nexport default install;"],"names":["String","Boolean","val","$el","style","left","top","desk","width","parentNode","clientWidth","height","clientHeight","animal","handle","querySelector","randomPosition","Math","floor","random","offsetLeft","offsetTop","addEventListener","e","$emit","status","dragging","pos","x","clientX","y","clientY","mousemoveObserver","mouseupObserver","preventDefault","move","removeEventListener","state","Vue","component","Xdraggable","window"],"mappings":"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"} -------------------------------------------------------------------------------- /dist/vue-xdraggable.min.js: -------------------------------------------------------------------------------- 1 | !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.VueXdraggable=e()}(this,function(){"use strict";var t={render:function(){var t=this,e=t.$createElement;return(t._self._c||e)("div",[t._t("default")],2)},staticRenderFns:[],props:{move:{type:String,default:"both"},randomPosition:{type:Boolean,default:!1}},data:function(){return{left:null,top:null,pos:{x:null,y:null},desk:{width:null,height:null},animal:{width:null,height:null},status:{dragging:!1}}},watch:{left:function(t){this.$el.style.left=t+"px"},top:function(t){this.$el.style.top=t+"px"}},mounted:function(){var t=this;this.desk.width=this.$el.parentNode.clientWidth,this.desk.height=this.$el.parentNode.clientHeight,this.animal.width=this.$el.clientWidth,this.animal.height=this.$el.clientHeight;var e=this.$el.querySelector("[handle]")?this.$el.querySelector("[handle]"):this.$el;this.randomPosition&&(this.$el.style.left=Math.floor(Math.random()*(this.desk.width-this.animal.width))+"px",this.$el.style.top=Math.floor(Math.random()*(this.desk.height-this.animal.height))+"px"),this.left=this.$el.offsetLeft,this.top=this.$el.offsetTop,e.addEventListener("mousedown",function(e){t.$emit("dragstart",e),t.status.dragging=!0,t.pos.x=e.clientX-t.left,t.pos.y=e.clientY-t.top}),document.addEventListener("mousemove",this.mousemoveObserver),document.addEventListener("mouseup",this.mouseupObserver)},methods:{mousemoveObserver:function(t){if(t.preventDefault(),1==this.status.dragging){if(this.$emit("dragging",t),"x"==this.move||"both"==this.move){var e=t.clientX-this.pos.x>0?t.clientX-this.pos.x:0;e>this.desk.width-this.animal.width&&(e=this.desk.width-this.animal.width),this.left=e}if("y"==this.move||"both"==this.move){var i=t.clientY-this.pos.y>0?t.clientY-this.pos.y:0;i>this.desk.height-this.animal.height&&(i=this.desk.height-this.animal.height),this.top=i}}},mouseupObserver:function(t){1==this.status.dragging&&this.$emit("dragend",t),this.status.dragging=!1}},beforeDestroy:function(){document.removeEventListener("mousemove",this.mousemoveObserver),document.removeEventListener("mouseup",this.mouseupObserver)}},e=!1,i=function(i){e||(e=!0,i.component("xdraggable",t))};return"undefined"!=typeof window&&window.Vue&&i(window.Vue),i}); 2 | //# sourceMappingURL=vue-xdraggable.min.js.map 3 | -------------------------------------------------------------------------------- /dist/vue-xdraggable.min.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"vue-xdraggable.min.js","sources":["../src/xdraggable.vue","../src/install.js","../src/index.js"],"sourcesContent":["\n\n\n\n","import Xdraggable from './xdraggable.vue';\nvar state = false;\n\nexport default function (Vue) {\n if (state) return;\n state = true;\n Vue.component('xdraggable', Xdraggable);\n}","import install from './install';\r\n\r\nif (typeof window !== 'undefined' && window.Vue) {\r\n install(window.Vue);\r\n}\r\n\r\nexport default install;"],"names":["String","Boolean","val","$el","style","left","top","desk","width","this","parentNode","clientWidth","height","clientHeight","animal","handle","querySelector","randomPosition","Math","floor","random","offsetLeft","offsetTop","addEventListener","e","$emit","status","dragging","pos","x","clientX","_this","y","clientY","mousemoveObserver","mouseupObserver","preventDefault","move","removeEventListener","state","Vue","component","Xdraggable","window"],"mappings":"yLAMA,8IAGkBA,eACG,6BAGHC,iBACG,gCAKH,SACA,YAGA,OACA,kBAII,YACC,oBAID,YACC,wBAGG,0BAKbC,QACIC,IAAIC,MAAMC,KAAOH,EAAI,mBAE1BA,QACKC,IAAIC,MAAME,IAAMJ,EAAI,0CAKxBK,KAAKC,MAAQC,KAAKN,IAAIO,WAAWC,iBACjCJ,KAAKK,OAASH,KAAKN,IAAIO,WAAWG,kBAElCC,OAAON,MAAQC,KAAKN,IAAIQ,iBACxBG,OAAOF,OAASH,KAAKN,IAAIU,iBAC1BE,EAASN,KAAKN,IAAIa,cAAc,YAAYP,KAAKN,IAAIa,cAAc,YAAYP,KAAKN,IAErFM,KAAKQ,sBACCd,IAAIC,MAAMC,KAAOa,KAAKC,MAAMD,KAAKE,UAAUX,KAAKF,KAAKC,MAAQC,KAAKK,OAAON,QAAQ,UACjFL,IAAIC,MAAME,IAAMY,KAAKC,MAAMD,KAAKE,UAAUX,KAAKF,KAAKK,OAASH,KAAKK,OAAOF,SAAS,WAEtFP,KAAOI,KAAKN,IAAIkB,gBAChBf,IAAMG,KAAKN,IAAImB,YACbC,iBAAiB,YAAY,SAACC,KAC5BC,MAAM,YAAYD,KAClBE,OAAOC,UAAW,IAClBC,IAAIC,EAAIL,EAAEM,QAAUC,EAAK1B,OACzBuB,IAAII,EAAIR,EAAES,QAAUF,EAAKzB,eAEzBiB,iBAAiB,YAAYd,KAAKyB,4BAClCX,iBAAiB,UAAUd,KAAK0B,sDAGvBX,QACZY,iBACuB,GAAtB3B,KAAKiB,OAAOC,SAAe,SACrBF,MAAM,WAAWD,GACN,KAAbf,KAAK4B,MAA4B,QAAb5B,KAAK4B,KAAe,KACnChC,EAAQmB,EAAEM,QAAQrB,KAAKmB,IAAIC,EAAG,EAAGL,EAAEM,QAAQrB,KAAKmB,IAAIC,EAAG,EACxDxB,EAAMI,KAAKF,KAAKC,MAAMC,KAAKK,OAAON,UAC1BC,KAAKF,KAAKC,MAAMC,KAAKK,OAAON,YAElCH,KAAOA,KAEA,KAAbI,KAAK4B,MAA4B,QAAb5B,KAAK4B,KAAe,KACnC/B,EAAOkB,EAAES,QAAQxB,KAAKmB,IAAII,EAAG,EAAGR,EAAES,QAAQxB,KAAKmB,IAAII,EAAG,EACvD1B,EAAKG,KAAKF,KAAKK,OAAOH,KAAKK,OAAOF,WAC3BH,KAAKF,KAAKK,OAAOH,KAAKK,OAAOF,aAElCN,IAAMA,8BAIPkB,GACa,GAAtBf,KAAKiB,OAAOC,eACNF,MAAM,UAAUD,QAEpBE,OAAOC,UAAW,sCAIlBW,oBAAoB,YAAY7B,KAAKyB,4BACrCI,oBAAoB,UAAU7B,KAAK0B,mBCtGhDI,GAAQ,IAEG,SAAUC,GACjBD,OACI,IACJE,UAAU,aAAcC,WCJV,oBAAXC,QAA0BA,OAAOH,OAChCG,OAAOH"} -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | const gulp = require('gulp'); 2 | const eslint = require('gulp-eslint'); 3 | const clear = require('clear'); 4 | const {rollup} = require('rollup'); 5 | const vue = require('rollup-plugin-vue2'); 6 | const babel = require('rollup-plugin-babel'); 7 | const uglify = require('rollup-plugin-uglify'); 8 | 9 | const moduleName = 'VueXdraggable'; 10 | const destName = 'vue-xdraggable'; 11 | // 检测代码风格 12 | gulp.task('lint', () => { 13 | clear(); 14 | return gulp.src(['src/**/*.js', 'src/**/*.vue', '!node_modules/**', '!dist/**']) 15 | .pipe(eslint()) 16 | .pipe(eslint.format()) 17 | .pipe(eslint.failAfterError()); 18 | }); 19 | // 编译开发版本 20 | gulp.task('build:dev', ['lint'], () => { 21 | return rollup({ 22 | entry: 'src/index.js', 23 | plugins: [vue(), babel()], 24 | external: ['vue-xdraggable'] 25 | }) 26 | .then((bundle) => { 27 | bundle.write({ 28 | moduleName, 29 | format: 'umd', 30 | dest: `dist/${destName}.js`, 31 | sourceMap: true, 32 | globals: { 33 | 'vue-xdraggable': 'VueXdraggable' 34 | } 35 | }); 36 | }); 37 | }); 38 | 39 | // 编译生产版本 40 | gulp.task('build:prod', ['lint'], () => { 41 | return rollup({ 42 | entry: 'src/index.js', 43 | plugins: [vue(), babel(), uglify()], 44 | external: ['vue-xdraggable'] 45 | }) 46 | .then((bundle) => { 47 | bundle.write({ 48 | moduleName, 49 | format: 'umd', 50 | dest: `dist/${destName}.min.js`, 51 | sourceMap: true, 52 | globals: { 53 | 'vue-xdraggable': 'VueXdraggable' 54 | } 55 | }); 56 | }); 57 | }); 58 | 59 | gulp.task('default', ['lint', 'build:dev', 'build:prod']); 60 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-xdraggable", 3 | "main": "dist/vue-xdraggable.js", 4 | "module": "dist/vue-xdraggable.js", 5 | "version": "1.0.0", 6 | "description": "", 7 | "author": { 8 | "name": "丁少雄", 9 | "email": "sx380449900@gmail.com", 10 | "url": "https://github.com/shaoxiong789" 11 | }, 12 | "scripts": { 13 | "test": "mocha --compilers js:babel-core/register src/**/*.spec.js", 14 | "build": "gulp", 15 | "lint": "gulp lint", 16 | "build:dev": "gulp build:dev", 17 | "build:prod": "gulp build:prod", 18 | "buildDemo": "rm -rf demo/dist && webpack --progress --hide-modules --config demo/build/webpack.config.js", 19 | "devDemo": "webpack-dev-server --inline --hot --quiet --config demo/build/webpack.config.js" 20 | }, 21 | "license": "MIT", 22 | "devDependencies": { 23 | "babel-eslint": "^7.2.3", 24 | "babel-loader": "^7.0.0", 25 | "babel-plugin-external-helpers": "^6.22.0", 26 | "babel-preset-es2015": "^6.24.1", 27 | "babel-preset-es2015-rollup": "^3.0.0", 28 | "babel-preset-flow": "^6.23.0", 29 | "babel-preset-react": "^6.24.1", 30 | "babel-preset-stage-0": "^6.24.1", 31 | "babel-standalone": "^6.25.0", 32 | "chai": "^4.0.2", 33 | "clear": "^0.0.1", 34 | "cross-env": "^5.0.1", 35 | "css-loader": "^0.28.4", 36 | "cssnano": "^3.10.0", 37 | "cssnext": "^1.8.4", 38 | "eslint-friendly-formatter": "^3.0.0", 39 | "eslint-loader": "^1.7.1", 40 | "eslint-plugin-vue": "^2.0.1", 41 | "extract-text-webpack-plugin": "^2.1.2", 42 | "file-loader": "^0.11.2", 43 | "gulp": "^3.9.1", 44 | "gulp-eslint": "^3.0.0", 45 | "html-webpack-plugin": "^2.28.0", 46 | "mocha": "^3.4.2", 47 | "npm-run-all": "^4.0.2", 48 | "rollup": "^0.42.0", 49 | "rollup-plugin-babel": "^2.7.1", 50 | "rollup-plugin-commonjs": "^8.0.2", 51 | "rollup-plugin-node-resolve": "^3.0.0", 52 | "rollup-plugin-replace": "^1.1.1", 53 | "rollup-plugin-uglify": "^2.0.1", 54 | "rollup-plugin-vue2": "^0.8.0", 55 | "rollup-watch": "^4.0.0", 56 | "style-loader": "^0.18.2", 57 | "uglify": "^0.1.5", 58 | "vue-loader": "^12.2.1", 59 | "vue-template-compiler": "^2.3.4", 60 | "webpack": "^2.6.1", 61 | "webpack-dev-server": "^2.4.5" 62 | }, 63 | "dependencies": { 64 | "vue": "^2.3.4" 65 | }, 66 | "repository": { 67 | "type": "git", 68 | "url": "git+https://github.com/shaoxiong789/vue-xdraggable.git" 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import install from './install'; 2 | 3 | if (typeof window !== 'undefined' && window.Vue) { 4 | install(window.Vue); 5 | } 6 | 7 | export default install; -------------------------------------------------------------------------------- /src/index.spec.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaoxiong789/vue-xdraggable/09c8a7761f566430fd0054fbca8312cac1e49a2c/src/index.spec.js -------------------------------------------------------------------------------- /src/install.js: -------------------------------------------------------------------------------- 1 | import Xdraggable from './xdraggable.vue'; 2 | var state = false; 3 | 4 | export default function (Vue) { 5 | if (state) return; 6 | state = true; 7 | Vue.component('xdraggable', Xdraggable); 8 | } -------------------------------------------------------------------------------- /src/xdraggable.vue: -------------------------------------------------------------------------------- 1 | 6 | 108 | 111 | 112 | -------------------------------------------------------------------------------- /umdDemo/css/index.css: -------------------------------------------------------------------------------- 1 | *{margin:0;padding:0;} 2 | li{list-style:none outside none;} 3 | body{background:url(../img/rbg.jpg) repeat scroll 0 0 #aaa;padding:50px 0 300px;} 4 | 5 | .box{width:1000px;margin:0 auto 20px;height:500px;background:#3bb3e0;border:5px solid #2561b4;} 6 | p{font-size:20px;color:#333;text-align:center;margin:0 0 20px;} 7 | .box.box-1{height:200px}.box-1 dl{top:25px;} 8 | .box.box-2{height:500px} 9 | /*.box-2 dl{left:50%;margin-left:-75px;}*/ 10 | i.hander{display:block;width:100%;height:25px;background:#ccc;text-align:center;font-size:12px;color:#333;line-height:25px;font-style:normal;} -------------------------------------------------------------------------------- /umdDemo/img/01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaoxiong789/vue-xdraggable/09c8a7761f566430fd0054fbca8312cac1e49a2c/umdDemo/img/01.jpg -------------------------------------------------------------------------------- /umdDemo/img/02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaoxiong789/vue-xdraggable/09c8a7761f566430fd0054fbca8312cac1e49a2c/umdDemo/img/02.jpg -------------------------------------------------------------------------------- /umdDemo/img/03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaoxiong789/vue-xdraggable/09c8a7761f566430fd0054fbca8312cac1e49a2c/umdDemo/img/03.jpg -------------------------------------------------------------------------------- /umdDemo/img/04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaoxiong789/vue-xdraggable/09c8a7761f566430fd0054fbca8312cac1e49a2c/umdDemo/img/04.jpg -------------------------------------------------------------------------------- /umdDemo/img/05.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaoxiong789/vue-xdraggable/09c8a7761f566430fd0054fbca8312cac1e49a2c/umdDemo/img/05.jpg -------------------------------------------------------------------------------- /umdDemo/img/06.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaoxiong789/vue-xdraggable/09c8a7761f566430fd0054fbca8312cac1e49a2c/umdDemo/img/06.jpg -------------------------------------------------------------------------------- /umdDemo/img/07.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaoxiong789/vue-xdraggable/09c8a7761f566430fd0054fbca8312cac1e49a2c/umdDemo/img/07.jpg -------------------------------------------------------------------------------- /umdDemo/img/rbg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shaoxiong789/vue-xdraggable/09c8a7761f566430fd0054fbca8312cac1e49a2c/umdDemo/img/rbg.jpg -------------------------------------------------------------------------------- /umdDemo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | VueDrag - rely on Vue.js 7 | 8 | 9 | 10 | 11 |
12 |

只能水平拖动

13 |
14 | 15 |
16 | 17 |
18 | 19 |
20 |

只能垂直拖动

21 |
22 | 23 |
24 | 25 |
26 |

自由拖动，初始位置固定

27 |
28 | 29 |
30 | 31 | 32 |
33 |

自动拖动，初始位置随机

34 |
35 | 36 |
37 | 38 | 39 |
40 | 41 | 42 |
43 | 44 | 45 |
46 | 47 |
48 |

自动拖动，初始位置随机，hander拖动

49 |
50 | 51 |
拖我
52 | 53 | 54 |
拖我
55 | 56 | 57 |
拖我
58 | 59 | 60 |
拖我
61 | 62 |
63 |
64 | 65 | 66 | 88 | 89 | --------------------------------------------------------------------------------