Tiny js library to make DOM elements movable and resizable .

Related tags

Learning resource javascript resize vanilla-js dom-manipulation draggable resizable drag-drag-and-drop resize-drag
Overview

resizedrag.js

oops, broken image

Tiny js library to make DOM elements movable and resizable . Demo Here . This library has added resizing functionalities to the existing dragdrop.js .

Getting started

Installing resize drag,

npm install resizedrag
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"));

Usage

Sample element in the html which has enabled resizedrag

<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,

data-rd-drag-enabled :

enable|disable drag for the dom element , default option is true .

data-rd-drag-enabled="false"

data-rd-resize-enabled :

enable|disable resize for the dom element , default option is true .

data-rd-resize-enabled="false"

data-rd-min-width :

Minimum resizeble width of the the dom element, default value is 5(in pixels) .

data-rd-min-width=25

data-rd-min-height :

Minimum resizeble height of the the dom element, default value is 5(in pixels) .

data-rd-min-height=25

data-rd-drag-boder-enabled :

Option to show border in the element which is being dragged , default value is true .

data-rd-drag-boder-enabled="false"

License

MIT

You might also like...

LiveJSON provides LiveView-like updating for JSON objects rather than DOM elements.

live_json LiveJSON provides LiveView-like updating for JSON objects rather than DOM elements. It works within your existing LiveViews - just use push_

Dec 29, 2022

📃 Fold up DOM elements like paper

📃 Fold up DOM elements like paper

OriDomi Fold up DOM elements like paper Dan Motzenbecker, MIT License @dcmotz Visit oridomi.com for examples, documentation and notes. Read the annota

Dec 14, 2022

jQuery-plugin for add/remove dom-items with renaming form-elements (arrays)

dynamicrows jQuery-plugin for add/remove rows by cloning existing row / renaming form-elements (arrays). Requirements jQuery =2.0 if move-action used

Nov 9, 2020

A pure javascript class for paginating through any number of DOM elements

A pure javascript class for paginating through any number of DOM elements

PurePajinate A pure javascript class for paginating through any number of DOM elements. Inspired by Pajinate, a plugin for jQuery. Options Option Type

Nov 21, 2022

Add class(es) to DOM elements while waiting for async action. Promise or callback.

jquery.loading Add class(es) to DOM elements while waiting for async action. Promise or callback. Install The simplest way is to include loading.js in

Mar 26, 2022

A lightweight function that executes callback when we see specific DOM elements.

did-i-see A lightweight function that executes callback when we see specific DOM elements. Built with IntersectionObserver. 🔴 Demo: https://did-i-see

Oct 18, 2022

Fast & tiny DOM differ

swapdom Fast & tiny DOM swapper. import swap from './swap-inflate.js' swap(parentNode, oldNodes, newNodes, endNode) swap-deflate.js strategy is small

Nov 29, 2022

Webview is a tiny cross-platform library to make web-based GUIs for desktop applications.

Webview is a tiny cross-platform library to make web-based GUIs for desktop applications.

webview_deno deno bindings for webview Webview is a tiny cross-platform library to make web-based GUIs for desktop applications. ⚠️ This project is st

Jan 2, 2023

A library for boolean aliases to help you make your code more confusing and make your coworkers hate you.

yup-nope A library for boolean aliases to help you make your code more confusing and make your coworkers hate you. Installation Using npm: npm install

Dec 10, 2022
Releases(v1.0.4)
Owner
Full Stack Developer@zoho
null
GitHub
A JavaScript library allowing the creation of manually resizable div elements.

Resizable.js A JavaScript library allowing the creation of resizable html divs. Try the live demo! Setup Link to both resizable.js and resizable-style

null 44 Oct 6, 2022
Create a deep copy of a set of matched elements with the dynamic state of all form elements copied to the cloned elements.

jq-deepest-copy FUNCTION: Create a deep copy of a set of matched elements while preserving the dynamic state of any matched form elements. Example Use

Michael Coughlin 5 Oct 28, 2022
Drag and drop library for two-dimensional, resizable and responsive lists

DEPRECATED This project is no longer maintained, please consider using react-grid-layout instead. GridList Drag and drop library for a two-dimensional

Hootsuite 3.6k Dec 14, 2022
A Drag-and-Drop library for all JavaScript frameworks implementing an enhanced transformation mechanism to manipulate DOM elements

JavaScript Project to Manipulate DOM Elements DFlex A Drag-and-Drop library for all JavaScript frameworks implementing an enhanced transformation mech

DFlex 1.5k Jan 8, 2023
An extension of DOM-testing-library to provide hooks into the shadow dom

Why? Currently, DOM-testing-library does not support checking shadow roots for elements. This can be troublesome when you're looking for something wit

Konnor Rogers 28 Dec 13, 2022
curtains.js is a lightweight vanilla WebGL javascript library that turns HTML DOM elements into interactive textured planes.

What is it ? Shaders are the new front-end web developpment big thing, with the ability to create very powerful 3D interactions and animations. A lot

Martin Laxenaire 1.4k Jan 1, 2023
JavaScript library to resize, reduce, or change ranges of DOM elements.

Range.js JavaScript library to resize, reduce, or change ranges of DOM elements using the HTML5 <input type="range"> element. Usage: Include range.js

Kyle Belanger 4 Jun 3, 2021
An open-source Typing-effect Library, That enables potential users to add a typing effect to mere DOM Elements.

Typing Effect Library An open-source Typing-effect Library I created. That enables potential users to add a typing effect to mere DOM Elements. Tool P

Okoye Charles 14 Oct 3, 2022
🖱 A JavaScript library for interactively picking DOM elements

pick-dom-element A JavaScript library (written in TypeScript) for interactively picking DOM elements. Usage Create an instance of the ElementPicker cl

Harry Marr 23 Dec 4, 2022
Custom Vitest matchers to test the state of the DOM, forked from jest-dom.

vitest-dom Custom Vitest matchers to test the state of the DOM This library is a fork of @testing-library/jest-dom. It shares that library's implement

Chance Strickland 14 Dec 16, 2022