Using Dragula with Aurelia 2 and TypeScript

I needed drag and drop functionality in one of my projects, and instead of implementing it myself I choose to try out Dragula. Using third party plugins is a breeze with Aurelia 2!

Dragula has been around for a while and is a great plugin for adding some drag and drop action to your components! Apparently Dragula have bridges for React and Angular, but as using third party modules in Aurelia is so simple, we don’t need a special implementation 😁

If you want to create a new Aurelia 2 project from scratch, check out the post “A Productive Aurelia 2 Build Setup“.

🛠️ Installing Dragula in Your Aurelia 2 Project

Install Dragula and it’s type definitions in your Aurelia 2 project using your preferred package manager, I used npm:

npm i dragula @types/dragula

Dragula uses a few classes for styling. These are shipped in the npm package and can be accessed in from dragula/dist/dragula.css The easiest way to get those into the project is to import the CSS in a template:

<import from="dragula/dist/dragula.css"></import> 

Or if you prefer, you can import it from a ts file:

import "dragula/dist/dragula.css";

🧛‍♂️ Using Dragula with Aurelia 2

To do it’s magic, Dragula needs a container (or several) containing the elements that will be dragable.

Creatign a container is easily done in Aurelia with the ref binding. Put the ref binding on an HTML element and give it a name. Then you can access it from the view model after it’s bound. See below.

<div class="container" ref="container">

And create a property with the same namn in the view-model:

public container: Element;

For using Dragula on the container element, we need to make sure Dragula is accessible and then just hand over our container to Dragula, like this:

dragula([this.container], {});

Do note the first parameter needs to be an array even if you just got one container. The second parameter is an options object, you can read more in the docs about how you can configure it.

👩‍💻 The Code

The view 👇

<import from="dragula/dist/dragula.css"></import>

<div class="page">
  <div class="container" ref="container">
    <div>🥳</div>
    <div>🚒</div>
    <div>🍔</div>
    <div>👨‍🚒</div>
    <div>🎉</div>
    <div>🍣</div>
    <div>🔥</div>
    <div>🍕</div>
    <div>💖</div>
  </div>
</div>

The view-model 👇

// import "dragula/dist/dragula.css";
import dragula from "dragula";

export class MyApp {
  public container: Element;

  constructor() {}

  public afterBind(): void {
    dragula([this.container], {});
  }
}

The result 👇

🔗 Resources

Example code can be found on GitHub
Dragula demo
Read more about Aurelia 2 on the docs site
Dumber docs

Happy Coding! 😊