Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

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 months ago
JSON representation

Drag Zone component for @vuejs

Lists

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


    

  



```