Introducing A New Web Component To Drag, Resize And Rotate

Add drag, drop and resize capabilities to any web apps.

Image for post
Image for post
Image for post
Image for post

Back Story

We really care about performance and dependencies. That’s why we tend to be a bit bundleophibic and, let’s face it, we are also nerds 🤷. Coding is as much a job as it is a hobby. That’s why we like to spend our evenings and weekends developing that kind of stuff.

Getting Started

The easiest way to try out our component is to use it, with the help of Unpkg, in a plain HTML file.

<html><head>
<script type="module" src="https://unpkg.com/@deckdeckgo/drag-resize-rotate@latest/dist/deckdeckgo-drag-resize-rotate/deckdeckgo-drag-resize-rotate.esm.js"></script>
<script nomodule="" src="https://unpkg.com/@deckdeckgo/drag-resize-rotate@latest/dist/deckdeckgo-drag-resize-rotate/deckdeckgo-drag-resize-rotate.js"></script>
</head>
<body>

</body>
</html>
<div style="background: purple;"></div>
<deckgo-drr
style="--width: 10%; --height: 19%; --top: 15%; --left: 12.5%;">
<div style="background: purple;"></div>
</deckgo-drr>
Image for post
Image for post

Options

The cool thing about this component, I think, is that you don’t have to write any JavaScript to use it. You wrap it around any element and “it works”. It provides a couple of options, which are all documented in the related chapter of our documentation for developers. It notably supports various units (percent, viewport related or pixels) and each action can be disabled separately. Its design can be customized with various CSS4 variables and finally it bubbles two events, one when the component is selected or unselected and another one when it has changed.

What’s Next

What’s coming next is actually up to you 😉. We are open source and are eager to hear your feedback. Ping us on our Slack channel, open an issue in our repo or even provide a Pull Request, you are most welcome to contribute to our pet project DeckDeckGo in any ways or simply by using it to compose your next slides 🙏.

Freelancer by day | Creator of DeckDeckGo by night | Organizer of the Ionic and IndieHackers Zürich Meetup

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store