resizedrag
Version:
Tiny javascript library to make DOM elements movable & resizable
59 lines (48 loc) • 1.76 kB
Markdown
Tiny js library to make DOM elements movable and resizable . [Demo Here](https://murugappanvr.github.io/resizedrag.js/) . This library has added resizing functionalities to the existing [dragdrop.js](https://github.com/knadh/dragmove.js) .
Installing resize drag,
```sh
npm install resizedrag
```
```sh
import { resizedrag } from 'resizedrag';
// (target, handler, onStart(target, x, y), onEnd(target, x, y)).
// onStart and onEnd are optional callbacks that receive target element, and x, y coordinates.
resizedrag(document.querySelector("#box"), document.querySelector("#box .drag-handle"));
```
Sample element in the html which has enabled resizedrag
```sh
<div class="drag-widget-container" id="test" data-rd-drag-enabled="false" data-rd-min-height=25 data-rd-min-width=25 data-rd-drag-boder-enabled="false">
</div>
```
Various attributes defined in the element above are explained below,
enable|disable drag for the dom element , default option is true .
```sh
data-rd-drag-enabled="false"
```
enable|disable resize for the dom element , default option is true .
```sh
data-rd-resize-enabled="false"
```
Minimum resizeble width of the the dom element, default value is 5(in pixels) .
```sh
data-rd-min-width=25
```
Minimum resizeble height of the the dom element, default value is 5(in pixels) .
```sh
data-rd-min-height=25
```
Option to show border in the element which is being dragged , default value is true .
```sh
data-rd-drag-boder-enabled="false"
```
MIT