Dynamic Node

A javascript package that lets you convert absolutely positioned html elements into resizable and draggable elements. Demo and Documentation (still in development).

Installation

To install use npm:
npm i dynamic-node --save

or yarn:
yarn add dynamic-node

Usage

Step 1

In your html:

    <div id="dynode-parent">
        <div id="dynode"></div>
    </div>

Step 2

In your css, import dynode's css and ensure target's parent is relatively positioned and target is absolutely positioned:

@import '~dynamic-node/build/index.css';

#dynode-parent {
    width: 1200px;
    height: 700px;
    position: relative; // parent should be relatively positioned
}

#dynode {
    width: 300px;
    height: 300px;
    position: absolute // target should be absolutely positioned
}

Step 3

Import and mount DynamicNode:

import DynamicNode from 'dynamic-node';

// initialize dynamic node
const dynode = new DynamicNode({
    element: 'dynode', // you can also pass an HTMLElement
    boundByParent: true
})

dynode.mount() // mount dynamic node