vue-dragula

KO | EN

gitlite — search

#javascript #python #react #llm #machine-learning #linux #docker #java #vue #security #mcp #ios #openai #open-source

(★ 14)

super simple nested drag and drop for Vue.js

vue-dragula 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# vue-dragula
### Features
- simple nested drag and drops
- multiple dragula instances automatically
- Vue.js keeps track of all changes

### Installation
Either do:
```
bower install vue-dragula
```
or download the scripts and include them in your project.

### Usage
Include vue-dragula after Vue.js and dragula:
```html
<script src="path/to/vue.js"></script>
<script src="path/to/dragula.js"></script>
<script src="bower_components/vue-dragula/vue-dragula.min.js"></script>
```
---
Make your Vue.js components draggable by initializing with *this* and an options-object, which can contain a *handle* and a *direction*, e.g.:
```javascript
Vue.component('dnd-board', {
    props: ['id'],
    template: '#dnd-board',
    ready: function() {
        Vue.dnd.initialize(this, {handle: 'class-of-handle', direction: 'horizontal'});
    },
    beforeDestroy: function () {
        Vue.dnd.destroy(this);
    }
});
```
- To pass the class of a handle or a direction parameter are optional.
- The direction could be 'horizontal' or 'vertical'.
- The default direction is 'vertical'.
- In the above example child-elements of the component 'dnd-board' will be draggable.

---

You have to make sure the component (e.g. 'dnd-board') has an id representing its draggable children's position in the Vue instance's data object, e.g.:
```html
<dnd-board v-cloak id="lists">
    <div class="column" v-for="list in lists">
        <h2 class="dnd-lists-handle">
            {{list.title}}
        </h2>
        <dnd-row v-cloak :id="'lists-' + $index + '-todos'" :list="list">
            <div class="card" v-for="todo in list.todos">
                {{todo.title}}
            </div>
        </dnd-row>
    </div>
</dnd-board>
<dnd-item v-cloak :id="'lists-' + $index + '-todos'"></dnd-item>
```
When the Vue instance's data object is:
```javascript
data: {
    lists: [
        {
            title: 'Todo',
            todos: [
                {title: 'code'},
                {title: 'eat'},
                {title: 'sleep'},
                {title: 'repeat'}
            ]
        },
        {
            title: 'Todo',
            todos: [
                {title: 'code'},
                {title: 'eat'},
                {title: 'sleep'},
                {title: 'repeat'}
            ]
        },
        {
            title: 'Todo',
            todos: [
                {title: 'code'},
                {title: 'eat'},
                {title: 'sleep'},
                {title: 'repeat'}
            ]
        }
    ]
}
```
---
If you have any questions or feedback feel free to open an issue :)

vue-dragula

vue-dragula 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

vue-dragula

vue-dragula 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README