Introduction

This is a zero dependency web component that provides a draggable and resizable div. This was mainly written as a way for me to explore web components and familiarize myself with the process of publishing to NPM and commercial CDNs. NOTE: this component was designed for desktop devices.

Demo

https://ksbrooksjr.github.io/drag-resize/

Installation

You can install this component from NPM:

npm install @ksbrooksjr/drag-resize

Or you can simply add a script tag that loads the component from a CDN:

<script
  src="https://cdn.jsdelivr.net/npm/@ksbrooksjr/drag-resize@0.4.0/dist/index.js"
  integrity="sha384-nAysYspY0HaFOsic/82kKlyj7qn34QY7rXez5s3Xzq2+1IRtN6+WYr9mJ51i53Qi"
  crossorigin="anonymous"></script>

Usage

After installing simply add the component to your markup.

<drag-resize>
  <div>
    <p>Drag and Resize Me!</p>
  </div>
</drag-resize>

Html Attributes

The component can be customized using the following html attributes:

isResizable(boolean): whether or not the component can be resized (default: true)
isDraggable(boolean): whether or not the component can be dragged (default: true)
minwidth(number): the minimum width (in pixels) that the component can be resized to (default: 100)
minheight(number): the minimum height (in pixels) that the component can be resized to (default: 100)
maxwidth(number): the maximum width (in pixels) that the component can be resized to (default: Infinity)
maxheight(number): the maximum height (in pixels) that the component can be resized to (default: Infinity)

Example with all options:

<drag-resize
  isResizable="true"
  isDraggable="false"
  minwidth="100"
  minheight="100"
  maxwidth="500"
  maxheight="500">
  <div>
    <p>Drag and Resize Me!</p>
    <p><noscript>This demo requires JavaScript!</noscript></p>
  </div>
</drag-resize>

Styling

You can style the component using the ::part(wrapper) pseudoselector.

drag-resize::part(wrapper) {
  border-color: blue;
}

Don't change the width, height, top, left, or cursor properties using this method though. To set the initial dimensions and position use css variables. The component accepts the following four css variables:

:root {
  --dr-initial-width: 400px;
  --dr-initial-height: 400px;
  --dr-initial-top: 50px;
  --dr-initial-left: 50px;
}

The div rendered by the component has the following default styles:

drag-resize::part(wrapper) {
  margin: 5px;
  border: 1px solid black;
  background: white;
}

Flash of Unstyled Content

Before the component is registered (or if js is unavailable) the browser will render the children of the custom element. To prevent a flash of unstyled content you should use the drag-resize:not(:defined) selector to give the child node the same styles that will eventually be applied to the component's shadow dom div element.

<style>
  :root {
    --dr-initial-width: 400px;
    --dr-initial-height: 400px;
    --dr-initial-top: 50px;
    --dr-initial-left: 50px;
  }
  drag-resize:not(:defined) > * {
    position: absolute;
    width: var(--dr-initial-width);
    height: var(--dr-initial-height);
    top: var(--dr-initial-top);
    left: var(--dr-initial-left);

    margin: 5px;
    border: 1px solid black;
    background: white;
  }
  drag-resize::part(wrapper) {
    margin: 5px;
    border: 1px solid black;
    background: white;
  }
</style>
<body>
  <drag-resize>
    <div>
      <span>Drag and Resize Me!</span>
    </div>
  </drag-resize>
</body>

Manually Defining the Component

The component is registered by default. If you'd like to import the class and register it yourself then import it like this:

import DraggableResizable from '@ksbrooksjr/drag-resize/dist/component.js'
customElements.define('drag-resize', DraggableResizable)