1.0.1 • Published 10 months ago
@redbuck/resizable v1.0.1
Install
pnpm i @redbuck/resizable
Usage
<div id="box">
<!-- use data-effect to make element be drag-handler -->
<div class="child resize-item" data-effect="start.x,start.y,end.x,end.y">
<span class="move-rect move-rect-tl" data-effect="start.x,start.y"></span>
<span class="move-rect move-rect-tr" data-effect="end.x,start.y"></span>
<span class="move-rect move-rect-rb" data-effect="end.x,end.y"></span>
<span class="move-rect move-rect-lb" data-effect="start.x,end.y"></span>
<span class="move-line move-line-top" data-effect="start.y"></span>
<span class="move-line move-line-bottom" data-effect="end.y"></span>
<span class="move-line move-line-left" data-effect="start.x"></span>
<span class="move-line move-line-right" data-effect="end.x"></span>
</div>
</div>
<!-- linking default style and of course you can modify it-->
<link rel="stylesheet" href="../dist/index.css">
<script type="module">
import Resizable from '../dist/es/index.js'
const resizer = new Resizable('#box')
resizer.on('effect', console.log)
</script>API
options
| Method | Description | default |
|---|---|---|
| container | The container element or selector | - |
| itemClassName | Which child element under el will effect | resize-item |
| effectManual | Should resizer instance effect dom manual | false |
| getItemOnStart | When drag start, carry the touched element call this function to get which item should be effect | find ancestors(include self) which one`s classList contain itemClassName |
| getEffectOnStart | When drag start, carry the touched element call this function to get effect in this drag | el => el.dataset.effect.split(',') |
| getPointsOnStart | When drag start, carry the touched element call this function to get initial points in this drag | el => el.dataset.effect.split(',') |
| listenerFactory | You can use this option to provide your own Listener | web-listener |
events
| Method | Description |
|---|---|
| effect | Emitted when drag move , carry the target and it`s shape |