https://github.com/hilongjw/vue-dragging

A sortable list directive with Vue
https://github.com/hilongjw/vue-dragging

vue

Last synced: 1 day ago
JSON representation

A sortable list directive with Vue

• Host: GitHub
• URL: https://github.com/hilongjw/vue-dragging
• Owner: hilongjw
• License: mit
• Created: 2016-11-16T06:39:22.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2018-12-12T14:05:44.000Z (about 6 years ago)
• Last Synced: 2025-01-23T00:08:18.879Z (3 days ago)
• Topics: vue
• Language: JavaScript
• Homepage: http://hilongjw.github.io/vue-dragging/
• Size: 387 KB
• Stars: 763
• Watchers: 23
• Forks: 144
• Open Issues: 24
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-vue - vue-dragging - dragging?style=social) - 使元素可以拖拽 (UI组件)
• awesome-github-vue - vue-dragging - 使元素可以拖拽 (UI组件)
• awesome-github-vue - vue-dragging - 使元素可以拖拽 (UI组件)
• awesome - vue-dragging - 使元素可以拖拽 (UI组件)

README

        
Awe-dnd

========

Makes your elements draggable in Vue.

![](https://github.com/hilongjw/vue-dragging/blob/master/preview.gif)

See Demo: [http://hilongjw.github.io/vue-dragging/](http://hilongjw.github.io/vue-dragging/)

Some of goals of this project worth noting include:

* support desktop and mobile

* Vue data-driven philosophy

* support multi comb drag

* Supports both of Vue 1.0 and Vue 2.0

## Requirements

- Vue: ^1.0.0 or ^2.0.0

## Install

From npm:

``` sh

$ npm install awe-dnd --save

```

## Usage

``` javascript

//main.js

import VueDND from 'awe-dnd'

Vue.use(VueDND)

```

``` html

export default {

  data () {

    return {

        colors: [{

            text: "Aquamarine"

        }, {

            text: "Hotpink"

        }, {

            text: "Gold"

        }, {

            text: "Crimson"

        }, {

            text: "Blueviolet"

        }, {

            text: "Lightblue"

        }, {

            text: "Cornflowerblue"

        }, {

            text: "Skyblue"

        }, {

            text: "Burlywood"

        }]

    }

  },

  /* if your need multi drag

  mounted: function() {

      this.colors.forEach((item) => {

          Vue.set(item, 'isComb', false)

      })

  } */

}

  


      
{{color.text}}

  


```

# API

`v-dragging="{ item: color, list: colors, group: 'color' }"`

#### Arguments:

 * `{item} Object`

 * `{list} Array`

 * `{group} String`

 * `{comb} String`

 `group` is unique key of dragable list.

 `comb` use for multi drag

#### Example

``` html



    
{{color.text}}





    
{{color.text}}



```


#### Event

``` html



    
{{color.text}}



```


``` javascript

export default {

  mounted () {

    this.$dragging.$on('dragged', ({ value }) => {

      console.log(value.item)

      console.log(value.list)

      console.log(value.otherData)

    })

    this.$dragging.$on('dragend', () => {

    })

  }

}

```

# License

[The MIT License](http://opensource.org/licenses/MIT)