# drag-item

> 拖拽列表中的子元素进行移动并交换位置

Latest version **1.0.13** (published 2023-06-06) · ISC license · 0 weekly downloads

## Install

```sh
npm install drag-item
pnpm add drag-item
yarn add drag-item
bun add drag-item
```

## 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.0.13 |
| Published | 2023-06-06 |
| First published | 2023-06-01 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 7.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | wsy |
| Maintainers | wsynha |
| Keywords | 拖拽, 移动, vue, 交换位置 |

## Links

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

## Dependencies (2)

- [lodash-es](https://npm.io/package/lodash-es.md) ^4.17.21
- [@types/lodash-es](https://npm.io/package/@types/lodash-es.md) ^4.17.7

## Recent versions

- 1.0.13 (latest) — 2023-06-06
- 1.0.12 — 2023-06-06
- 1.0.11 — 2023-06-06
- 1.0.10 — 2023-06-06
- 1.0.9 — 2023-06-02
- 1.0.8 — 2023-06-02
- 1.0.7 — 2023-06-01
- 1.0.6 — 2023-06-01
- 1.0.5 — 2023-06-01
- 1.0.4 — 2023-06-01
- 1.0.3 — 2023-06-01
- 1.0.2 — 2023-06-01
- 1.0.1 — 2023-06-01
- 1.0.0 — 2023-06-01

## README

```
import Drag from 'drag-item'
new Drag({
    element: document.querySelector('.container'),
    cloneClassName:'item-clone'
})

// 比如
<div class="container">
    <div class="item">1</div>
    <div class="item">1</div>
    <div class="item">1</div>
    <div class="item">1</div>
    <div class="item">1</div>
</div>

<style>
// 拖拽时生成的克隆对象样式必须包含以下属性
.item-clone {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
  user-select: none;
  pointer-events: none;
  opacity: 0.8;
}

.item {
    margin-right: 10px;
    width: 16.19rem;
    height: 10rem;
    cursor: pointer;
    user-select: none;
}
</style>
```

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