# vue-light-drag

> Vue drag and drop library without any dependency

Latest version **1.1.1** (published 2021-10-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-light-drag
pnpm add vue-light-drag
yarn add vue-light-drag
bun add vue-light-drag
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.1 |
| Published | 2021-10-13 |
| First published | 2021-10-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 17.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | xuanmo |
| Maintainers | fujianui |

## Links

- npm: https://www.npmjs.com/package/vue-light-drag
- npm.io page: https://npm.io/package/vue-light-drag

## Recent versions

- 1.1.1 (latest) — 2021-10-13
- 1.1.0 — 2021-10-13
- 1.0.3 — 2021-10-06
- 1.0.2 — 2021-10-06
- 1.0.1 — 2021-10-06
- 1.0.0 — 2021-10-06

## README

# vue-light-drag

#### Lightweight drag and drop components


### install
```bash
yarn add vue-light-drag 或者 npm install vue-light-drag
```

### 引入
```
import Vue from 'vue';
import Drag from 'vue-light-drag';

Vue.use(Drag);
```

### demo
```javascript
<template>
    <div>
        <Drag
            style="width: 200px"
            :list="list1"
            :config="config1"
        >
            <template v-slot="{ item }">
                <div class="item">
                    {{ item.name }}
                </div>
            </template>
        </Drag>

        <Drag
            style="width: 200px"
            :list="list2"
            :config="config2"
        >
            <template v-slot="{ item }">
                <div class="item">
                    {{ item.name }}
                </div>
            </template>
        </Drag>
    </div>
</template>

<script>
export default {
    name: 'App',

    data() {
        return {
            list1: new Array(10).fill(0).map((_, i) => ({
                name: `列表1 - ${i + 1}`,
                draggable: true,
            })),

            config1: {
                name: 'test',
                push: true,
                pull: true,
                exchange: true,
            },

            list2: new Array(10).fill(0).map((_, i) => ({
                name: `列表2 - ${i + 1}`,
                draggable: true,
            })),

            config2: {
                name: 'test',
                push: true,
                pull: true,
                exchange: true,
            },
        };
    },
};
</script>
```

### Attributes
| 参数      |    说明    |      类型      |      可选值       |     默认值     |
|---------- |-------- |---------- |-------------  |-------- |
| list     |    渲染列表  | Array  |   -          |    []     |
|  config.name     |   跨列表关联名   | string    |   - |    ''   |
|  config.uuidField     |   唯一属性字段名   | string    |   - |    'id'   |
| config.push     | 当前列表是否支持从其他列表push元素进来   |   boolean    | — |  true  |
| config.pull     |  将当前列表的某个元素拖拽并添加到其他列表里，该元素是否从当前列表移除  | boolean    | — |  true   |
| config.exchange     |  当前列表元素之间是否支持交换位置   | boolean    | — |  true   |


### Events
| 事件名称 | 说明 | 回调参数 |
|---------|---------|---------|
| drag-start | - | index |
| drag-enter | - | index |
| drag-over | - | index |
| drag-end | - | — |

### 交流  1215901037@qq.com

---
_Source: https://npm.io/package/vue-light-drag · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._