ASW DRAG RESIZE

Asw-drag-resize is a modular drag & drop library written on pure vanila javascript, allowing you to start small and build up with the features you need. At its most basic, Draggable gives you drag & drop functionality, fast DOM reordering, accessible markup, and a bundle of events to grab on to.

Setup

Install from npm

  npm install asw-drag-resize

Import

import AswDragResize from 'asw-drag-resize' 

use

HTML

<div class="parent" id="parent">
  <div class="box" id="box" ></div>
</div>

Javascript

const boxShape = {
  h: 100,
  w: 100,
  x: 100,
  y: 100,
  hr: false,
  wr: false,
  xr: false,
  yr: false,
  active: true
}

const myBox = new AswDragResize(document.getElementById('box'), document.getElementById('parent'),
  {
    // required
    boxShape,
    // are optional
    events: {
      onActive: () => console.log('active'),
      onInactive: () => console.log('inactive'),
      onDragActive: () => console.log('drag active'),
      onDragInactive: () => console.log('drag inactive'),
      onDragStart: () => console.log('drag start'),
      onDragStop: () => console.log('drag stop'),
      onDraging: () => console.log('draging'),
      onResizeActive: () => console.log('resizing active'),
      onResizeInactive: () => console.log('resizing inactive'),
      onResizeStart: () => console.log('resizing start'),
      onResizeStop: () => console.log('resizing stop'),
      onResizeing: (_, dir) => console.log('resizing ' + dir),
    }
  })

Api's

console.log(myBox.id) // will give you element unique id

myBox.setBoxShape(newBoxShapeObject) // manual update box shape

myBox.active() // Enable element for darg and resize

myBox.inactive() // Disable element for darg and resize