Creating Drag n drop in html using js

Question

I hope everyone's doing good during this harsh time.
I'm creating an HTML template for Label printing demo.
I want to create drag and drop functionality into this page which can only be obtained through JavaScript and I am new even to HTML.
I know I this is a dumb question but I really need this functionality as it has already taken my so much time with no outcome. It would be of great help if you can tell me or guide me how to achieve this.

!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Label Printer</title>
<style>
    body {
        display: block;
        max-width: 29.7cm;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0;
    }
    div{
        width: 49.2%;
        height: 3.7125cm;
        float: left;
    }
</style>
</head>
<body>
    <div><p>michael richardson<br>1 arbitrary road<br>coningsby ,&nbsp; Lincolnshire&nbsp;<br>IX14YY&nbsp;<br>United Kingdom<br></p></div>
    <div><p>michael richardson<br>1 arbitrary road<br>coningsby ,&nbsp; Lincolnshire&nbsp;<br>IX14YY&nbsp;<br>United Kingdom<br></p></div>
    <div><p>michael richardson<br>1 arbitrary road<br>coningsby ,&nbsp; Lincolnshire&nbsp;<br>IX14YY&nbsp;<br>United Kingdom<br></p></div>
    <div><p>michael richardson<br>1 arbitrary road<br>coningsby ,&nbsp; Lincolnshire&nbsp;<br>IX14YY&nbsp;<br>United Kingdom<br></p></div>
    <div><p>michael richardson<br>1 arbitrary road<br>coningsby ,&nbsp; Lincolnshire&nbsp;<br>IX14YY&nbsp;<br>United Kingdom<br></p></div>
    <div><p>michael richardson<br>1 arbitrary road<br>coningsby ,&nbsp; Lincolnshire&nbsp;<br>IX14YY&nbsp;<br>United Kingdom<br></p></div>
    <div><p>michael richardson<br>1 arbitrary road<br>coningsby ,&nbsp; Lincolnshire&nbsp;<br>IX14YY&nbsp;<br>United Kingdom<br></p></div>
    <div><p>michael richardson<br>1 arbitrary road<br>coningsby ,&nbsp; Lincolnshire&nbsp;<br>IX14YY&nbsp;<br>United Kingdom<br></p></div>
    <div><p>michael richardson<br>1 arbitrary road<br>coningsby ,&nbsp; Lincolnshire&nbsp;<br>IX14YY&nbsp;<br>United Kingdom<br></p></div>
    <div><p>michael richardson<br>1 arbitrary road<br>coningsby ,&nbsp; Lincolnshire&nbsp;<br>IX14YY&nbsp;<br>United Kingdom<br></p></div>
    <div><p>michael richardson<br>1 arbitrary road<br>coningsby ,&nbsp; Lincolnshire&nbsp;<br>IX14YY&nbsp;<br>United Kingdom<br></p></div>
    <div><p>michael richardson<br>1 arbitrary road<br>coningsby ,&nbsp; Lincolnshire&nbsp;<br>IX14YY&nbsp;<br>United Kingdom<br></p></div>
    <div><p>michael richardson<br>1 arbitrary road<br>coningsby ,&nbsp; Lincolnshire&nbsp;<br>IX14YY&nbsp;<br>United Kingdom<br></p></div>
    <div><p>michael richardson<br>1 arbitrary road<br>coningsby ,&nbsp; Lincolnshire&nbsp;<br>IX14YY&nbsp;<br>United Kingdom<br></p></div>
    <div><p>michael richardson<br>1 arbitrary road<br>coningsby ,&nbsp; Lincolnshire&nbsp;<br>IX14YY&nbsp;<br>United Kingdom<br></p></div>
    <div><p>michael richardson<br>1 arbitrary road<br>coningsby ,&nbsp; Lincolnshire&nbsp;<br>IX14YY&nbsp;<br>United Kingdom<br></p></div>
    <div><p>michael richardson<br>1 arbitrary road<br>coningsby ,&nbsp; Lincolnshire&nbsp;<br>IX14YY&nbsp;<br>United Kingdom<br></p></div>
    <div><p>michael richardson<br>1 arbitrary road<br>coningsby ,&nbsp; Lincolnshire&nbsp;<br>IX14YY&nbsp;<br>United Kingdom<br></p></div>
    <div><p>michael richardson<br>1 arbitrary road<br>coningsby ,&nbsp; Lincolnshire&nbsp;<br>IX14YY&nbsp;<br>United Kingdom<br></p></div>
    <div><p>michael richardson<br>1 arbitrary road<br>coningsby ,&nbsp; Lincolnshire&nbsp;<br>IX14YY&nbsp;<br>United Kingdom<br></p></div>
    <div><p>michael richardson<br>1 arbitrary road<br>coningsby ,&nbsp; Lincolnshire&nbsp;<br>IX14YY&nbsp;<br>United Kingdom<br></p></div>
    <div><p>michael richardson<br>1 arbitrary road<br>coningsby ,&nbsp; Lincolnshire&nbsp;<br>IX14YY&nbsp;<br>United Kingdom<br></p></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <style media="print">@page {margin-top: 0;margin-left: 3cm;margin-right: 0;margin-bottom: 0;}</style>
</body>
</html>

Can you use third party JS library? If yes, dragula is a really good option. bevacqua.github.io/dragula — Arpit Tyagi
– Arpit Tyagi, Commented Jun 5, 2020 at 3:32
@ArpitTyagi Thanks that's really great, but is there a simple way using just small amount of js. — Html Maker
– Html Maker, Commented Jun 5, 2020 at 3:37

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

You need to look at HTML drag and drop API

Most important stuff is setting and accessing the data using:

event.dataTransfer.setData and event.dataTransfer.getData

Example:

I had created a small vanilla JS TaskManager project some time back that used drag and drop functionality. You can refer to the same on this github link:

The function drop() will especially be useful to you. See it here

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jun 5, 2020 at 3:49

chiragrtr

9324 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Creating Drag n drop in html using js

1 Answer 1

You need to look at HTML drag and drop API

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

You need to look at HTML drag and drop API

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related