https://github.com/xjh22222228/v-drag-move

🤚 v-drag-move
https://github.com/xjh22222228/v-drag-move

vue vue-drag-move vue3

Last synced: 2 months ago
JSON representation

🤚 v-drag-move

• Host: GitHub
• URL: https://github.com/xjh22222228/v-drag-move
• Owner: xjh22222228
• License: mit
• Created: 2021-01-01T14:21:37.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2021-02-06T08:15:06.000Z (about 4 years ago)
• Last Synced: 2025-02-01T16:47:23.138Z (3 months ago)
• Topics: vue, vue-drag-move, vue3
• Language: Vue
• Homepage:
• Size: 1.08 MB
• Stars: 3
• Watchers: 3
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  

  
在Vue应用里, 让你的容器可以跳起来！

  


    

    

    

  


![](media/demo.gif)

## 安装

确保 Vue 版本 >= 3.x

```bash

npm i v-drag-move -S

# or

yarn v-drag-move

```

## Demo

[Click Try](https://codesandbox.io/s/loving-cdn-d30m5?file=/src/App.vue)

```vue

  

    


      

    

  


import { defineComponent } from 'vue'

import DragMove from 'v-drag-move'

export default defineComponent({

  name: 'App',

  components: {

    DragMove

  }

})

.container {

  width: 300px;

  height: 500px;

  margin: 0 auto;

  border: 1px solid red;

  border-radius: 5px;

}

.header {

  height: 35px;

  border-bottom: 1px solid #ccc;

}

```

## Attributes

| 参数           | 描述              |类型           | 默认值              |是否必填   |

| ------------- |------------------- |-------------- |------ |

| active | 是否处于激活状态, 对于类似 Modal 组件务必设置 | boolean | false |否 |

| move-selector | 容器选择器, 整个容器能被移动 |  string  | -- |是 |

| drag-selector | 拖动选择器, 拖动部位, 默认容器部位 |string| -- |否 |

## LICENSE

[MIT](./LICENSE)