DEV Community: Subhendu Dash

Drag and Drop feature in HTML and Vanilla JS

Subhendu Dash — Mon, 13 Jun 2022 18:40:03 +0000

The drag and drop tool is quite useful in a variety of situations, like transferring data from one disc to another, deleting items by placing them in the trash folder, and so on. We can drag a file to a website and upload it to a cloud service, convert the file to a different format, and so on.
As a result, the drag and drop feature is a really interesting tool that every web developer should be aware of.

Drag and Drop API

We can use the built-in API in vanilla JS to implement them without having to use a library or a CDN. This API may also be used in other JS frameworks and libraries. There may be a separate library to implement this functionality in certain libraries. For example, in React, there is a library called react-dnd that needs the implementation of state and hooks features. This is something I may write on in the future.

Types of attributes

To make an image, div or any component as draggable, we need to set the attribute draggable as true.

For example,

For image,:

<img alt="#" src="#" draggable="true">

For div:

<div alt="#" src="#" draggable="true"></div>

For texts such as <p>, <h1>-<h6>, etc:

<p draggable="true">Lorem Ipsum</p>

Now comes the interesting part. For events like starting dragging the component, dropping the component, and the event in between drag and drop, we'll need to code the logic in JavaScript. For that, attributes like ondrag, ondrop, ondragstart, ondragover, etc. needs to be included.

Implementation

Let's make two columns where objects can be dragged and dropped anytime.

<div class="container">
        <div class="A">
            <h1 draggable="true">Hello</h1>
        </div>
        <div class="B"></div>
</div>

I will add CSS now.

.A, .B {
    padding: 2%;
    border: 1px solid #000;
    width: 50%;
    margin: 2%;
}

.container {
    display: flex;
    flex-direction: row;
}

<h1> containing hello will be draggable.

The webpage will look like

Now, it's time to write the JS logic for both drag and drop event.

As both the columns A and B will act as a container for drag and drop, we will implement the attribute ondrop (JS logic for dropping the component) and ondragover (when you are still dragging and you didn't drop the component yet).

So, I am rewriting the HTML code as below:

<div class="container">
        <div class="A" ondrop="onDrop(event)" ondragover="onDragOver(event)">
            <h1 draggable="true" ondragstart="onDragStart(event)" id="heading">Hello</h1>
        </div>
        <div class="B" ondrop="onDrop(event)" ondragover="onDragOver(event)"></div>
 </div>

Let's write the function onDrop(event), onDragOver(event) and onDragStart(event).

When we use the standard drag and drop capability, when we transfer an object, it disappears from its original location and is added to the new location. That is exactly what we shall do. We will write the function onDragStart(event) to vanish the object and onDragOver(event) to add the object in the new place.

Note: To check how an event looks like, just print the event in console using console.log() function.

function onDragStart(event) {
    event.dataTransfer.setData("text", e.target.id);
}

Here, setData(format, target) function sets the drag data in text, image or any other form to a particular target.

function onDragOver(event) {
    event.preventDefault();
    let select = e.dataTransfer.getData("text");
    let getComp = document.getElementById(select);
    e.target.appendChild(getComp);
}

In the above snippet, we are getting the same data in the same form using getData(format) function and appending that object in the second column.

Note: It's important to know from where event.target.id comes. It's from the same drag and drop event I was printing in the console. On scrolling down the event discription, target key will be visible.

The notation is .class#id (here, div.B).

For ondragover attribute,

function onDragOver(event) {
    event.preventDefault();
    document.getElementById("heading").style = "red";`
}

So, when you will drag the object, the text colour will change to red.

To revert back to same colour after dropping the component, ondragend attribute can be used.

Let's modify <h1> and write the function.

<h1 draggable="true" ondragstart="drag(event)" ondragend="onDragEnd(event)" id="heading">Hello</h1>

function onDragEnd(event) {
    event.preventDefault();
    document.getElementById("heading").style.color = "black";
}

That's it! We have implemented drag and drop API in our webpage.

Oops....

We need some modification when there are multiple components to be dragged and dropped. Instead of using HTML id's, we need to use HTML class because HTML id can be used only once. So, we need to set a class name in each component to be dragged and in JavaScript we need to access using e.target.className, then you are good to go.

Conclusion

We used vanilla JS to develop drag and drop API on a web page and emphasised the value and use cases of various attributes.
I hope you found this post helpful in creating drag and drop functionality in your web applications. I would strongly advise you to experiment with these capabilities in various scenarios, since they were originally perplexing to me. As a result, understanding and implementation took a lengthy time.

Make sure you follow me on 👇🏻

Linux Job Scheduling using Python

Subhendu Dash — Wed, 25 May 2022 09:29:38 +0000

Have you ever considered automating basic tasks on your desktop, such as sending timely emails to friends or downloading files from a certain source?

Well, it's possible if you know job scheduling in operating systems.

In this article, I will show how to schedule a job in Linux (I will be using Ubuntu 22.04 here).

Cron

In Linux, "cron" command utility is used for job scheduling. Cron is derived from a Greek word "Chronos" meaning time. All the cron along with the task to be done, is stored in a crontab file.

The syntax of cron is given below

 ┌───────────── minute (0 - 59)
 │ ┌───────────── hour (0 - 23)
 │ │ ┌───────────── day of the month (1 - 31)
 │ │ │ ┌───────────── month (1 - 12)
 │ │ │ │ ┌───────────── day of the week (0 - )
 │ │ │ │ │                                 
 │ │ │ │ │
 │ │ │ │ │
 * * * * * <command>

For example, if you want to represent "25 May 18:30", then it's cron representation will be

30 18 25 5 *

Using Crontab in Ubuntu

Let's run a Python script automatically using Crontab. I will write a Python program to make a simple GUI app using tkinter module.

from tkinter import *

window = Tk(className="App")
window.geometry("300x300")

label = Label(window, text="Hello World")
label.pack()

window.mainloop()

Now save this Python script in a directory and copy the file location.

Open terminal and type

crontab -e

This command will open Crontab file in that terminal (vim/nano/emacs editor based on your preference. I am using nano.).

Remove all the comments if you want.
Add an extra line in that file

43 13 25 5 * /usr/bin/python3 -u /path/of/file/script.py

Note: Specify the path of python3 interpreter (usr/bin/python3 in Ubuntu) while entering a job.
Execute whereis python3 in your terminal to get the path.

So, you will get a new window automatically on time.

There are many useful crontab commands, I will list out here.

crontab -e // opens a new crontab file
crontab -l // shows list of job scheduled
crontab -r // deletes user's crontab
crontab -h // to display list of commands available in crontab

Accessing Crontab using `python-crontab` module

Opening Crontab files and entering the jobs manually is a tedious task.
There is a module in Python python-crontab which helps to
schedule the job easily.

Install python-crontab.

pip3 install python-crontab

Create a new Python file. Import and initialise Crontab object with current user

from crontab import CronTab
cron = CronTab(user="<username>")

Note: Type whoami in terminal to get the username.

Set a new command using cron.new() function. Let's execute the same file.

job = cron.new("/usr/bin/python3 -u /path/of/file/script.py")

Now schedule the job.

job.minute.on(43)
job.hour.on(13)
job.day.on(25)
job.month.on(5) # That's 25th May 13:43

Save the changes.

cron.write()

Run this program and check crontab -l to ensure whether job is scheduled or not.

That's it! You have scheduled a job using Python.

Wait, hold on

This is my first article in dev.to. I was working on a project, then I came across job scheduling in Linux, which makes really easy to automate tasks. If you like this article, make sure you follow me on dev.to for more interesting articles.

Follow me on 👇🏻