dynamic-node
TypeScript icon, indicating that this package has built-in type declarations

2.3.0 • Public • Published

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

Package Sidebar

Install

npm i dynamic-node

Weekly Downloads

1

Version

2.3.0

License

ISC

Unpacked Size

37.4 kB

Total Files

15

Last publish

Collaborators

  • prodbyola