# draggable-polyfill

> 🌈 a beautify polyfill for native drag!

Latest version **1.2.4** (published 2022-05-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install draggable-polyfill
pnpm add draggable-polyfill
yarn add draggable-polyfill
bun add draggable-polyfill
```

## 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.4 |
| Published | 2022-05-30 |
| First published | 2019-10-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 1.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 84 |
| Author | XboxYan |
| Maintainers | xboxyan |
| Keywords | polyfill, draggable, drag, html5, dragover, dragend, drop |

## Links

- npm: https://www.npmjs.com/package/draggable-polyfill
- Repository: https://github.com/XboxYan/draggable-polyfill
- Homepage: https://github.com/XboxYan/draggable-polyfill#readme
- Issues: https://github.com/XboxYan/draggable-polyfill/issues
- npm.io page: https://npm.io/package/draggable-polyfill

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 1.2.4 (latest) — 2022-05-30
- 1.2.3 — 2022-04-16
- 1.2.1 — 2022-04-16
- 1.2.0 — 2022-04-15
- 1.1.1 — 2019-11-01
- 1.1.0 — 2019-10-26
- 1.0.1 — 2019-10-25
- 1.0.0 — 2019-10-25

## README

# draggable-polyfill

🌈a beautify polyfill for html5 native drag! 

## Feature

Remove translucent preview!

* light and beautiful
* native and no dependence
* progressive enhancement and no side effects
* cross framework

## Example

* [with draggable-polyfill](http://xboxyan.codelabo.cn/draggable-polyfill/example/index.html)

<img alt="native drag with draggable-polyfill" src="./screenshot/drag.gif"  style="width:600px">

## How to use

Import the library code

* [github](https://github.com/XboxYan/draggable-polyfill)

```html
<script src="./lib/draggable-polyfill.js"></script>
```

* [npm](https://www.npmjs.com/package/draggable-polyfill)

```
npm install draggable-polyfill
```

then these native draggable elements( `[draggable=true]`,`img` ) will becoming beautiful

`[allowdrop]`elements will receive drag event data.

```html
<div draggable="true">drag me</div>
<img src="./avator" alt="avator">
<!--dropbox-->
<div allowdrop></div>
```

you can use [HTML Drag and Drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API)

```js
//draggable
draggable.addEventListener('dragstart',()=>{})
draggable.addEventListener('drag',()=>{})
draggable.addEventListener('dragend',()=>{})
//allowdrop
allowdrop.addEventListener('dragover',()=>{})
allowdrop.addEventListener('dragenter',()=>{})
allowdrop.addEventListener('dragleave',()=>{})
allowdrop.addEventListener('drop',()=>{})
```

## How to Custom Style

draggable elements will add props `dragging` and dropbox will add props `over` under dragging, so you can custom style through CSS

```html
<!--your draggable element-->
<div class="dragbox" draggable="true">drag me</div>
<!--your allowdrop element-->
<div class="dropbox" allowdrop></div>
```
```css
/**custom styles**/
.dragbox[dragging]{
    box-shadow: 5px 5px 15px rgba(0, 0, 0, .2);
}
.dropbox[over]{
    border-color: red;
}
```

## Other Feature

you can set `axis=X|Y` to limit drag direction or press `shift` key when dragging.

```html
<div axis="X" draggable="true">drag me</div>
```

## Browser Supports

* Chrome
* Firefox
* Safari

Note:This polyfill works on Chrome and Firefox, not for IE( IE is not supports `setDragImage` ), it will keep default effect.

## License

MIT

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