@ksbrooksjr/drag-resize
Advanced tools
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.
https://ksbrooksjr.github.io/drag-resize/
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"></script>
After installing simply add the component to your markup.
<drag-resize>
<div>
<p>Drag and Resize Me!</p>
</div>
</drag-resize>
The component can be customized using the following html attributes:
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>
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;
}
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>
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)
FAQs
Draggable and resizable web component.
We found that @ksbrooksjr/drag-resize demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Company News
Socket won two 2026 Reppy Awards from RepVue, ranking in the top 5% of all sales orgs. AE Alexandra Lister shares what it's like to grow a sales career here.
Security News
NIST will stop enriching most CVEs under a new risk-based model, narrowing the NVD's scope as vulnerability submissions continue to surge.
Company News
/Security News
Socket is an initial recipient of OpenAI's Cybersecurity Grant Program, which commits $10M in API credits to defenders securing open source software.