Free to drag the HTML element to any place. 🍭
- Tiny
- No dependence
- High Performance
- Mobile supported
- Easy use
<div class="box">
<h1>Drag me</h1>
<p>Hello World</p>
</div>
<script>
const box = document.querySelector('.box');
const dragger = new Dragger();
dragger.draggable(box)
</script>download source file at src/drag-it.js and simply include it.
<script src="/path/to/drag-it.js"></script>
drag-it supports npm under the name "drag-it".
npm install drag-it or yarn add drag-it
DragIt can also be loaded as an AMD, CommonJS or ES6 module.
import dragIt from 'drag-it'
const dragIt = require('drag-it')
require(['drag-it'], callback)
<div class="box">
<h1>Drag me</h1>
<p>Hello World</p>
</div>const box = document.querySelector('.box');
const dragger = new Dragger();
dragger.draggable(box)Fully declare just like this ↓
<div class="box">
<h1 class="header">Drag me</h1>
<p>Hello World</p>
</div>
<script>
const box = document.querySelector('.box')
const header = box.querySelector('.header')
const dragger = new Dragger({
hasBoundary: false,
container: document.documentElement,
overflowLeft: 0,
overflowRight: 0,
overflowTop: 0,
overflowBottom: 0
})
dragger.draggable(header, box)
</script>| param | means | default |
|---|---|---|
| hasBoundary | has moving boundary | false |
| container | declare a container of mover | <html> element |
| overflowLeft | the overflow left distance of boundary | 0 |
| overflowRight | the overflow right distance of boundary | 0 |
| overflowTop | the overflow top distance of boundary | 0 |
| overflowBottom | the overflow bottom distance of boundary | 0 |
| param | means | required |
|---|---|---|
| dragger | The dom element which trigger dragging, such as the dialog title bar. | yes |
| mover | The dom element which is moving actually, such as the entire dialog. If no declared, the mover will be the dragger. | no |