dragula javascript

How to use Dragula in JavaScript? Drag-and-Drop Features

by

Have you heard about the drag-and-drop feature provided by Dragula in JavaScript?

If not, and you’re curious about what it is and how to use it, then this article is for you!

We will delve into the world of Dragula in JavaScript, exploring its features and showing you how to harness its power.

What is Dragula?

Dragula is an open-source JavaScript library that simplifies the process of implementing drag-and-drop functionality on your website.

In addition to that, Dragula provides an elegant and efficient solution for developers looking to enable users to effortlessly move elements around a web page with ease.

In simple words, Dragula is a JavaScript library that makes it easy to add drag-and-drop functionality to your web application.

It’s lightweight and doesn’t rely on any other libraries, making it a great choice for projects where you want to keep things simple.

Features of Dragula

✔ Incredibly simple to configure

✔ No unnecessary or excessive dependencies

✔ Automatically determines the sorting order

✔ Provides visual feedback with a shadow indicating where the item will be placed when dropped

✔ Supports touch events!

✔ Effortlessly manages clicks without the need for any setup

What are the advantages of using Dragula in JavaScript?

Let’s explore why Dragula has become a favorite among web developers:

Easy Integration

Dragula is incredibly easy to integrate into your web projects. With just a few lines of code, you can enable drag-and-drop functionality, saving you valuable development time.

Cross-Browser Compatibility

One of the challenges of web development is ensuring compatibility across various browsers.

Dragula takes care of this by offering cross-browser support, ensuring a consistent user experience.

Customizable and Lightweight

Dragula allows developers to customize the behavior and appearance of drag-and-drop elements. Whether you want to define specific drop zones or change the appearance of dragged items, Dragula offers flexibility.

Built-in Events

The library provides a range of built-in events, making it easy to respond to user interactions during drag-and-drop operations. You can trigger actions when an item is dragged, dropped, or moved, enhancing user interaction.

How to use Dragula in JavaScript?

Now that we’ve discussed the advantages, let’s get started with using Dragula in your project.

Step1: Installation

To begin, you’ll need to include the Dragula library in your project.

You can obtain it through npm:

npm install dragula --save ✅

You can also do this by adding the following script tag to your HTML file:

<script src="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.3/dragula.min.js"></script> ✅

Step 2: Creating Drag-and-Drop Containers

Next, define the containers where you want to enable drag-and-drop functionality.

You can use simple HTML elements, such as <div>, to represent these containers.

<div id="container1">
  <!-- Your content here -->
</div>
<div id="container2">
  <!-- Your content here -->
</div>

Step 3: Initializing Dragula

Now, it’s time to initialize Dragula and specify the containers you want to make draggable.

var containers = [document.getElementById('container1'), document.getElementById('container2')];
var drake = dragula(containers);

Step 4: Customizing Drag-and-Drop Behavior

You can customize the drag-and-drop behavior by defining event listeners. For example, you can execute specific actions when items are dropped.

drake.on('drop', function(el, target, source, sibling) {

// Your custom code here

});

Example code to drag and drop using Dragula in JavaScript

In this section, you’ll see the example code on how to use Dragula in JavaScript to drag and drop:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drag-and-Drop Example</title>
    <!-- Include Dragula JavaScript library -->
    <script src="dragula.js"></script>
    <!-- Include Dragula CSS for styling (optional) -->
    <link rel="stylesheet" href="dragula.css">
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>Drag-and-Drop Example</h1>
<div style="display:flex;"> <!-- Add this line -->
    <!-- Two-column layout -->
    <div class="container-left">
        <h2>Column 1</h2>
        <!-- Define containers for drag-and-drop in the first column -->
        <div id="container1" class="container">
            <div class="example">Example 1</div>
            <div class="example">Example 2</div>
            <div class="example">Example 3</div>
        </div>
    </div>

    <div class="container-right">
        <h2>Column 2</h2>
        <!-- Define containers for drag-and-drop in the second column -->
        <div id="container2" class="container">
            <div class="example">Example 4</div>
            <div class="example">Example 5</div>
            <div class="example">Example 6</div>
        </div>
    </div>
</div>

<!-- Initialize Dragula -->
<script src="script.js"></script>

</body>
</html>

JavaScript

// Define containers
var containers = [document.getElementById('container1'), document.getElementById('container2')];
// Initialize Dragula
var drake = dragula(containers);

// Add a custom drop event handler (optional)
drake.on('drop', function (el, target, source, sibling) {
    // Custom code to handle the drop event
    console.log('Item dropped!');
});

CSS

/* Custom CSS for styling */
body {
    font-family: Arial, sans-serif;
    background-color: white;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 90vh;
    flex-direction: column; /* Add this line */
}

h1 {
    text-align: center;
    color: #333;
    background-color: #f8f8f8;
    padding: 0px;
    margin-bottom: 20px; /* Add this line */
}

.container {
    border: 1px solid #ccc;
    padding: 10px;
    background-color: #fff;
    margin: 0px;
    box-shadow: 5px 2px 5px rgba(0, 0, 0, 0.1);
}

.container-left {
    flex: 1;
    padding: 100px;
    margin-right: 10px;
}

.container-right {
    flex: 1;
    padding: 100px;
    margin-left: 10px;
}

/* New styles for the example boxes */
.example {
    border: 2px solid #000; /* Add a border */
    padding: 10px; /* Add some padding */
    margin-bottom: 10px; /* Add some margin at the bottom */
}

.example:nth-child(odd) {
    background-color: #ffdddd; /* Color every odd example red */
}

.example:nth-child(even) {
    background-color: #ddffdd; /* Color every even example green */
}

Here’s the complete example code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drag-and-Drop Example</title>
    <!-- Include Dragula JavaScript library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.3/dragula.min.js"></script>
    <!-- Include Dragula CSS for styling (optional) -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.3/dragula.min.css">
    <style>
        /* Custom CSS for styling */
        body {
            font-family: Arial, sans-serif;
            background-color: white;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 90vh;
            flex-direction: column; /* Add this line */
        }

        h1 {
            text-align: center;
            color: #333;
            background-color: #f8f8f8;
            padding: 0px;
            margin-bottom: 20px; /* Add this line */
        }
    
        .container {
            border: 1px solid #ccc;
            padding: 10px;
            background-color: #fff;
            margin: 0px;
            box-shadow: 5px 2px 5px rgba(0, 0, 0, 0.1);
        }

        .container-left {
            flex: 1;
            padding: 100px;
            margin-right: 10px;
        }

        .container-right {
            flex: 1;
            padding: 100px;
            margin-left: 10px;
        }

        /* Add more custom styles as needed */

        /* New styles for the example boxes */
        .example {
            border: 2px solid #000; /* Add a border */
            padding: 10px; /* Add some padding */
            margin-bottom: 10px; /* Add some margin at the bottom */
        }

        .example:nth-child(odd) {
            background-color: #ffdddd; /* Color every odd example red */
        }

        .example:nth-child(even) {
            background-color: #ddffdd; /* Color every even example green */
        }
    </style>
</head>
<body>

<h1>Drag-and-Drop Example</h1>
<div style="display:flex;"> <!-- Add this line -->
    <!-- Two-column layout -->
    <div class="container-left">
        <h2>Column 1</h2>
        <!-- Define containers for drag-and-drop in the first column -->
        <div id="container1" class="container">
            <div class="example">Example 1</div>
            <div class="example">Example 2</div>
            <div class="example">Example 3</div>
        </div>
    </div>

    <div class="container-right">
        <h2>Column 2</h2>
        <!-- Define containers for drag-and-drop in the second column -->
        <div id="container2" class="container">
            <div class="example">Example 4</div>
            <div class="example">Example 5</div>
            <div class="example">Example 6</div>
        </div>
    </div>
</div> <!-- Add this line -->

    <!-- Initialize Dragula -->
    <script>
        // Define containers
        var containers = [document.getElementById('container1'), document.getElementById('container2')];
        // Initialize Dragula
        var drake = dragula(containers);

        // Add a custom drop event handler (optional)
        drake.on('drop', function (el, target, source, sibling) {
            // Custom code to handle the drop event
            console.log('Item dropped!');
        });
    </script>
</body>
</html>

Output:

Conclusion

In conclusion, Dragula is a lightweight JavaScript library that simplifies the implementation of drag-and-drop functionality in web applications.

To use Dragula in your project, follow these simple steps:

  1. Install Dragula using npm or include it via a script tag in your HTML file.
  2. Define the containers where you want to enable drag-and-drop functionality using HTML elements.
  3. Initialize Dragula by specifying the containers you want to make draggable.
  4. Customize the drag-and-drop behavior by defining event listeners.

With Dragula, you can enhance user interaction on your website and create a seamless and intuitive drag-and-drop experience for your users.

We hope this article has provided you with enough information to understand the Dragula in JavaScript.

If you want to explore more JavaScript topics, check out the following articles:

Thank you for reading Itsourcecoders 😊.

Leave a Comment