https://github.com/surmon-china/vue-drag-zone

Drag Zone component for @vuejs
https://github.com/surmon-china/vue-drag-zone

drag-and-drop drag-zone-component draggable surmon surmon-china vue vue-component vue-components vue-demo vue-directive vue-drag-zone vue-plugin vue-resource vue2 vuejs vuejs2 web-dr

Last synced: 2 days ago
JSON representation

Drag Zone component for @vuejs

• Host: GitHub
• URL: https://github.com/surmon-china/vue-drag-zone
• Owner: surmon-china
• License: mit
• Archived: true
• Created: 2016-12-21T12:58:56.000Z (about 8 years ago)
• Default Branch: main
• Last Pushed: 2022-05-09T02:52:41.000Z (over 2 years ago)
• Last Synced: 2025-01-18T06:38:24.693Z (8 days ago)
• Topics: drag-and-drop, drag-zone-component, draggable, surmon, surmon-china, vue, vue-component, vue-components, vue-demo, vue-directive, vue-drag-zone, vue-plugin, vue-resource, vue2, vuejs, vuejs2, web-dr
• Language: JavaScript
• Homepage: https://github.surmon.me/vue-drag-zone
• Size: 49.8 KB
• Stars: 127
• Watchers: 4
• Forks: 20
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-github-vue - vue-drag-zone - 适用于Vue2的dom拖动组件 (实用库)
• awesome - vue-drag-zone - 适用于Vue2的dom拖动组件 (实用库)
• awesome-vue - vue-drag-zone - china/vue-drag-zone?style=social) - 适用于Vue2的dom拖动组件 (实用库)
• awesome-github-vue - vue-drag-zone - 适用于Vue2的dom拖动组件 (实用库)

README

        

[![GitHub stars](https://img.shields.io/github/stars/surmon-china/vue-drag-zone.svg?style=flat-square)](https://github.com/surmon-china/vue-drag-zone/stargazers)

[![Travis](https://img.shields.io/travis/rust-lang/rust.svg?style=flat-square)](https://github.com/surmon-china/vue-drag-zone)

[![GitHub issues](https://img.shields.io/github/issues/surmon-china/vue-drag-zone.svg?style=flat-square)](https://github.com/surmon-china/vue-drag-zone/issues)

[![GitHub forks](https://img.shields.io/github/forks/surmon-china/vue-drag-zone.svg?style=flat-square)](https://github.com/surmon-china/vue-drag-zone/network)

[![GitHub last commit](https://img.shields.io/github/last-commit/google/skia.svg?style=flat-square)](https://github.com/surmon-china/vue-drag-zone)

[![license](https://img.shields.io/github/license/mashape/apistatus.svg?style=flat-square)](https://github.com/surmon-china/vue-drag-zone)

[![NPM](https://nodei.co/npm/vue-drag-zone.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/vue-drag-zone/)

[![NPM](https://nodei.co/npm-dl/vue-drag-zone.png?months=9&height=3)](https://nodei.co/npm/vue-drag-zone/)

# Vue-Drag-Zone

Drag Zone component for Vue.

适用于 Vue 的 DOM 拖动组件。

### Example

[Example Page](https://github.surmon.me/vue-drag-zone)

### Install

#### CDN

``` html

  Vue.use(window.VueDragZone)

```

#### NPM

``` bash

npm install vue-drag-zone --save

```

### Mount

#### mount with global

``` javascript

import Vue from 'vue'

import VueDragZone from 'vue-drag-zone'

Vue.use(VueDragZone)

```

#### mount with component

```javascript

import { dragZone, dragHandle, dragContent } from 'vue-drag-zone'

export default {

  components: {

    dragZone,

    dragHandle,

    dragContent

  }

}

```

### component

```html

  

  

    

      
item 1

    

    

    

      
item 2

    

    

    

      
item 3

    

    

      
item 4

    

    

    

      
item 5

    


  

  

    

      
item 1

    

    

    

      
item 2

    

    

      
item 3

    

    

    

      
item 4

    

    

    

      
item 5

    

  


```