Unlock the Power of Interactive Components with Moveable
Moveable, a versatile npm package, empowers you to create dynamic, user-friendly interfaces. With Moveable, your components can be dragged, resized, scaled, rotated, warped, pinched, grouped, and snapped – the possibilities are endless!
Getting Started with Moveable
To explore the features of Moveable, we’ll use a vanilla JavaScript environment. Create a new directory named “features” and add an HTML file named “index.html” with a script tag. Also, create an empty div with a class of “root”. This is where the magic happens!
<html>
<head></head>
<body>
<div class="root"></div>
<script>
// Initialize Moveable here
</script>
</body>
</html>Five Exciting Features to Elevate Your Components
-
- Draggable: Transform your components into movable targets with Draggable. Perfect for apps with column-based layouts, like Trello.
const draggable = Moveable.getDefaultGroup().add("draggable", {
target: document.querySelector(".root"),
draggable: true,
});
draggable.on("drag", (e) => {
console.log(e.target.getBoundingClientRect());
});-
- Resizable: Give users the power to resize components with Resizable. Useful for applications that require dynamic layout adjustments.
const resizable = Moveable.getDefaultGroup().add("resizable", {
target: document.querySelector(".root"),
resizable: true,
});
resizable.on("resize", (e) => {
console.log(e.target.getBoundingClientRect());
});-
- Scalable: Scale components with ease using Scalable. This feature is ideal for image manipulation or zooming in/out.
const scalable = Moveable.getDefaultGroup().add("scalable", {
target: document.querySelector(".root"),
scalable: true,
});
scalable.on("scale", (e) => {
console.log(e.target.getBoundingClientRect());
});-
- Rotatable: Add rotation capabilities to your components with Rotatable.
const rotatable = Moveable.getDefaultGroup().add("rotatable", {
target: document.querySelector(".root"),
rotatable: true,
});
rotatable.on("rotate", (e) => {
console.log(e.target.style.transform);
});-
- Warpable: Distort or bend components with Warpable.
const warpable = Moveable.getDefaultGroup().add("warpable", {
target: document.querySelector(".root"),
warpable: true,
});
warpable.on("warp", (e) => {
console.log(e.target.style.transform);
});Moveable in Frameworks and Storybook
Moveable offers custom packages for popular frameworks like React, Angular, Preact, Vue, and Svelte. Experiment with different features on Moveable’s Storybook page without any setup.