Dragula – Simplify Drag and Drop Functionality for Modern Web Applications

Dragula is a simple yet powerful drag-and-drop library that helps developers implement drag-and-drop functionalities in web applications with ease. It provides a straightforward API to manage draggable elements and their interactions. With Dragula, you can create rich, interactive web interfaces with minimal code.

Getting Started with Dragula

npm install dragula --save

Basic Usage

  import dragula from 'dragula';

  const container1 = document.getElementById('container1');
  const container2 = document.getElementById('container2');

  dragula([container1, container2]);

Configuring Dragula

  dragula([container1, container2], {
    moves: function (el, source, handle, sibling) {
      return true; // elements are always draggable by default
    },
    accepts: function (el, target, source, sibling) {
      return true; // elements can be dropped to any container by default
    },
    invalid: function (el, handle) {
      return false; // elements are never considered invalid for dragging by default
    },
    copy: false, // elements are not copied by default
    revertOnSpill: false, // spilled elements are not reverted by default
    removeOnSpill: false, // spilled elements are not removed by default
    direction: 'vertical', // drags are vertical by default
  });

API Methods

drake.on(event, listener)

Listen to Dragula events. Available events are: ‘drag’, ‘dragend’, ‘drop’, ‘cancel’, ‘remove’, ‘shadow’, ‘over’, ‘out’, ‘cloned’.

  const drake = dragula([container1, container2]);

  drake.on('drag', function (el) {
    console.log('Element is being dragged:', el);
  });

drake.cancel(revert)

Cancel the dragging of an element. If revert is true, the element is moved back to its original position.

  const drake = dragula([container1, container2]);
  drake.on('drag', function (el) {
    // Some condition to cancel
    drake.cancel(true);
  });

drake.remove()

Remove the currently dragged element from the DOM.

  const drake = dragula([container1, container2]);
  drake.on('drag', function (el) {
    // Some condition to remove
    drake.remove();
  });

Complete Example: Task Management App

Let’s create a simple task management app using Dragula.

  import dragula from 'dragula';

  // Add containers for tasks
  const todoContainer = document.getElementById('todo');
  const inProgressContainer = document.getElementById('in-progress');
  const doneContainer = document.getElementById('done');

  // Initialize dragula
  const drake = dragula([todoContainer, inProgressContainer, doneContainer]);

  drake.on('drop', function (el, target, source, sibling) {
    console.log(`Element dropped: ${el.id}, target: ${target.id}, source: ${source.id}`);
  });

With the above setup, you can drag and drop tasks between different stages (Todo, In Progress, Done) to manage your work effectively.

Dragula makes it incredibly easy to add drag-and-drop functionality to your web applications. Its simplicity and flexibility allow you to create interactive, user-friendly interfaces with minimal effort.

Hash: 47bae6dc1ec60307d696e903e429963955bda2d10f34edf61b093fc95c8d3357