https://github.com/shaoxiong789/vue-xdraggable
Vue2 component for draggable and resizable elements.
https://github.com/shaoxiong789/vue-xdraggable
draggable vue vue-drag vue-drag-and-drop vue-draggable vue-dragging vue-xdraggable vue2 vue2-dnd xdraggable
Last synced: 27 days ago
JSON representation
Vue2 component for draggable and resizable elements.
- Host: GitHub
- URL: https://github.com/shaoxiong789/vue-xdraggable
- Owner: shaoxiong789
- License: mit
- Created: 2017-06-15T08:59:19.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-09-30T08:32:40.000Z (over 7 years ago)
- Last Synced: 2024-04-26T09:22:25.123Z (about 1 year ago)
- Topics: draggable, vue, vue-drag, vue-drag-and-drop, vue-draggable, vue-dragging, vue-xdraggable, vue2, vue2-dnd, xdraggable
- Language: HTML
- Homepage: https://shaoxiong789.github.io/vue-xdraggable/demo/dist
- Size: 521 KB
- Stars: 9
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-xdraggable [![NPM version][npm-image]][npm-url]
>
## Installation
```sh
$ npm install --save vue-xdraggable
```
## Usage
* 支持模块化加载和浏览器中直接引入使用
```js
import xdraggable from 'vue-xdraggable/src/xdraggable.vue';
// OR
import xdraggable from 'vue-xdraggable';
Vue.use(xdraggable)
// OR
```
## Example
[Demo Page](https://shaoxiong789.github.io/vue-xdraggable/demo/dist/)
## Code Demo
```vue
只能水平拖动
只能垂直拖动
自由拖动，初始位置固定
自动拖动，初始位置随机
自动拖动，初始位置随机，hander拖动
拖我
拖我
拖我
拖我
import Xdraggable from '../../src/xdraggable.vue';
export default {
components: {
Xdraggable
},
data() {
return {
focus: null
};
},
methods: {
dragstart(e) {
window.console.log('开始拖动',e);
},
dragging(e) {
window.console.log('拖动中',e);
},
dragend(e) {
window.console.log('拖动结束',e);
},
focusing(num) {
this.focus = num;
}
}
};
dl img{
display: block;
}
.hander{
cursor: move;
}
```
## License
MIT © [丁少雄](https://github.com/shaoxiong789)
[npm-image]: https://badge.fury.io/js/vue-xdraggable.svg
[npm-url]: https://npmjs.org/package/vue-xdraggable