Press "Enter" to skip to content

DOM Elements Draggable & Resizable Library | resizedrag.js

resizedrag.js library to make DOM elements moveable and resizable. This library has added resizing functions to the existing dragdrop.js file.

jquery draggable, draggable js, draggable js examples, draggable npm, shopify draggable, javascript drag and drop connectors, javascript drag and drop list

How to make use of it:

1. Install and import the resizedrag.js with NPM.

# NPM
$ npm i resizedrag --save

import { resizedrag } from 'resizedrag';

2. Initialize the resizedrag.js on the target DOM aspect and config the draggable and resizable behaviors utilizing the next data attributes.

<div class="drag-widget-container" 
     id="example" 
     data-rd-drag-enabled="false" 
     data-rd-min-height=25 
     data-rd-min-width=25 
     data-rd-drag-border-enabled="false"
     >
</div>
// resizedrag(target, handler, onStart, onEnd);
resizedrag(document.querySelector("#example"),document.querySelector("#example"));

3. Use the start/end occasions to simulate “snap to edge” behaviour.

const snapThreshold = 50;
function onStart(el, x, y) {
  // On drag start, remove the fixed bottom style to prevent the bottom
  // from sticking on the screen.
  el.style.top = el.offsetTop + "px"
  el.style.bottom = "auto"
}
function onEnd(el, x, y) {
  console.log('end');
  // Automatically snap to corners.
  if (window.innerHeight - (el.offsetTop + el.offsetHeight) < snapThreshold) {
      el.style.top = "auto"
      el.style.bottom = "0px"
  }
  if (window.innerWidth - (el.offsetLeft + el.offsetWidth) < snapThreshold) {
      el.style.left = "auto"
      el.style.right = "0px"
  }
  if (el.offsetTop < snapThreshold) {
      el.style.top = "0px"
  }
  if (el.offsetLeft < snapThreshold) {
      el.style.left = "0px"
  }
}
resizedrag(document.querySelector("#example"),document.querySelector("#example"), onStart, onEnd);

Tiny Draggable & Resizable Library,  resizedrag.js Plugin/Github, html draggable


See Demo And Download

Official Website(MurugappanVR): Click Here

This superior jQuery/javascript plugin is developed by MurugappanVR. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.