5 Things You Can Do with Moveable

Moveable is an npm package developed by Korean frontend engineer Younkue Choi that makes your components draggable, resizable, scalable, rotatable, warpable, pinchable, groupable, snappable — and much more.

In this tutorial, we’ll walk through some of the coolest and most useful things you can do with the Movable library. You can find the complete code on GitHub.

Setup

We’ll use the vanilla JavaScript environment to discuss the features of Moveable.

Create a new directory named features. For this example, we’ll just use the Moveable scripts, but you can also use the npm package.

npm i moveable

Create a new HTML file named index.html and add the following script to it.

<script src="//daybrush.com/moveable/release/latest/dist/moveable.min.js"></script>

Create a new index.js file and add that to the index.html too. Also, create an empty div with class="root". This is where we’ll reference moveable.

Here’s what your index.html will look like:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Features</title>

</head>
<body>
    <div id="title">
        <h1>Things you can do in Moveable</h1>
    </div>
    <div class="container">
        <div class="root">

        </div>
    </div>
    <script type=" module " src="./index.js "></script>
  <script src="//daybrush.com/moveable/release/latest/dist/moveable.min.js"></script>
</body>
</html>

All the styling and CSS is up to you. I’ve added basic styling for the purpose of this tutorial.

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    margin: 0;
}
#title {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    text-align: center;
}
#root {
    background-color: #DDD;
    width: 200px;
    height: 200px;
}

Our app should look as follows. The Moveable magic will happen in the grey box.

Moveable Demo App

Features

Below are five exciting features you can add to your components with Moveable.

For each feature, we’ll focus on the main options and events. We’d never be able to touch on every method and feature in a single blog post, but we’ll walk through what you need to set up the basic functionality.

Let’s get started!

#npm #node #moveable #developer

Setup

Features

blog.logrocket.com

5 Things You Can Do with Moveable