# vue-drag-layout

> vue可拖拽布局

Latest version **1.2.0** (published 2019-04-11) · ISC license · 0 weekly downloads

## Install

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

## 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.2.0 |
| Published | 2019-04-11 |
| First published | 2019-03-18 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 50.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | tangerine |
| Maintainers | tangerine_x |
| Keywords | vue, drag, layout |

## Links

- npm: https://www.npmjs.com/package/vue-drag-layout
- Repository: https://github.com/qq3603643/VueDragLayout
- Homepage: https://github.com/qq3603643/VueDragLayout#readme
- Issues: https://github.com/qq3603643/VueDragLayout/issues
- npm.io page: https://npm.io/package/vue-drag-layout

## Recent versions

- 1.2.0 (latest) — 2019-04-11
- 1.1.1 — 2019-03-19
- 1.1.0 — 2019-03-18
- 1.0.2 — 2019-03-18
- 1.0.1 — 2019-03-18
- 1.0.0 — 2019-03-18

## README

# vue-drag-layout
vue拖动布局

# 如何使用
  - 安装
  ```
    npm install vue-drag-layout --save-dep
  ```

  - 引入

  ```
    import Vue from 'vue';
    import DragToLayout from "vue-drag-layout";

    // autoSwap: 当拖拽元素移动至目标位置时 是否自动交替位置
    // 默认false
    Vue.use(DragToLayout, { autoSwap: false });
  ```

  - 示例
  ```
    <template>
      <ul>
        <li
          v-for="(item, index) in list"
          :key="index"
          :item="item"
          v-dragToLayout="{
            group: 'example',
            list: list,
            item: item,
            // 可选，设置拖拽元素的可拖拽部分
            className: "drag-ele-class"
          }"
        ></li>
      </ul>
    </template>

    <script>
      export default {
        data() {
          return {
            list: [
              {
                id: '1',
                name: 'item1',
              },
              {
                id: '2',
                name: 'item2'
              }
            ]
          };
        },

        mounted() {
          const vm = this;

          vm.$dragging.$on('dragged', ($event) => {
            const {
              dragged,  // 拖拽完成的item
              to,       // 拖拽被替换的item
              group,    // 拖拽分组名
            } = $event;

            ...
          });
        },
      };
    </script>
  ```

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