js code drag drop

Create Drag And Drop Using HTML,CSS and JavaScript (Source Code)

Create Drag And Drop Using HTML, CSS, and JavaScript (Source Code)

Hey Coders, In this Article We learn how to create a Drag and Drop functionality Using Html, Css, And JavaScript. We use the profile list as a drag item and then put it anywhere we want in our div.

Code bySanket Bodake
Project DownloadLink Available below
Language usedHTML, CSS, and JavaScript
External link / DependenciesYes
ResponsiveYes

  50+ HTML, CSS & JavaScript Projects With Source Code So we start with the Html sector, then Css for styling our complete project, and after this, we use a little bit of JavaScript so we drag and drop. Let’s start Codes!

Html Code For Drag And Drop:-

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drag&Drop</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
</head>

<body>
    <div class="drop">
        <div class="drop_container" id="drop-items">
            <div class="drop_card">
                <div class="drop_data">
                    <img src="joginder.jpg" alt="img1" class="drop_img">

                    <div>
                        <h1 class="drop_name">Thara Bhai joginder</h1>
                        <span class="drop_profession">Bug developer</span>
                    </div>
                </div>

                <div>
                    <a href="#" class="drop_social"><i class='bx bxl-instagram'></i></a>
                    <a href="#" class="drop_social"><i class='bx bxl-facebook'></i></a>
                    <a href="#" class="drop_social"><i class='bx bxl-twitter'></i></a>
                </div>
            </div>

            <div class="drop_card">
                <div class="drop_data">
                    <img src="Kalal.jpg" alt="img1" class="drop_img">

                    <div>
                        <h1 class="drop_name">Kalal</h1>
                        <span class="drop_profession">COMEDY designer</span>
                    </div>
                </div>

                <div>
                    <a href="#" class="drop_social"><i class='bx bxl-instagram'></i></a>
                    <a href="#" class="drop_social"><i class='bx bxl-facebook'></i></a>
                    <a href="#" class="drop_social"><i class='bx bxl-twitter'></i></a>
                </div>
            </div>

            <div class="drop_card">
                <div class="drop_data">
                    <img src="Lakshya.jpg" alt="img1" class="drop_img">

                    <div>
                        <h1 class="drop_name">Lakshya Bhai</h1>
                        <span class="drop_profession">Full Comedy Ho Gyi</span>
                    </div>
                </div>

                <div>
                    <a href="#" class="drop_social"><i class='bx bxl-instagram'></i></a>
                    <a href="#" class="drop_social"><i class='bx bxl-facebook'></i></a>
                    <a href="#" class="drop_social"><i class='bx bxl-twitter'></i></a>
                </div>
            </div>

            <div class="drop_card">
                <div class="drop_data">
                    <img src="Carry.webp" alt="img1" class="drop_img">

                    <div>
                        <h1 class="drop_name">Carry</h1>
                        <span class="drop_profession">Destroyer(Legend Know)Rating</span>
                    </div>
                </div>

                <div>
                    <a href="#" class="drop_social"><i class='bx bxl-instagram'></i></a>
                    <a href="#" class="drop_social"><i class='bx bxl-facebook'></i></a>
                    <a href="#" class="drop_social"><i class='bx bxl-twitter'></i></a>
                </div>
            </div>
        </div>
    </div>
    <!-- JS -->
    <script src="app.js"></script>
</body>

</html>

This is all Html complete code for our drag-and-drop project. We use 4 images and their main text and caption. We use a script link that for Sortablejs so don’t forget to include In our html file. Ecommerce Website Using Html Css And Javascript here is the output with only html code Drag And Drop Using HTML,CSS and JavaScript Drag And Drop Using HTML,CSS and JavaScript Drag And Drop Using HTML,CSS and JavaScript

CSS Code For Drag And Drop:-

/*===== VARIABLES CSS =====*/

:root {
  /*===== Colors =====*/
  --first-color: #272a3a;
  --first-color-light: #8a8eaa;
  --first-color-lighten: #f8f8fc;
  /*===== Font and typography =====*/
  --body-font: "Ubuntu", sans-serif;
  --normal-font-size: 1rem;
  --smaller-font-size: 0.813rem;
}

/*===== BASE =====*/

*,
::before,
::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--body-font);
  background-color: var(--first-color-lighten);
}

h1 {
  margin: 0;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
}

/*===== DRAG and DROP =====*/

.drop,
.drop_container {
  display: grid;
}

.drop {
  height: 100vh;
  align-items: center;
  justify-content: center;
}

.drop_container {
  row-gap: 1rem;
  padding: 2rem;
  box-shadow: 4px 4px 16px #e1e1e1;
}

.drop_card,
.drop_data {
  display: flex;
  align-items: center;
}

.drop_card {
  width: 360px;
  justify-content: space-between;
  padding: 0.75rem 1.25rem.75rem 0.75rem;
  background-color: var(--first-color-lighten);
  box-shadow: 4px 4px 16px #e1e1e1, -2px -2px 16px #fff;
  border-radius: 2.5rem;
}

.drop_img {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  margin-right: 1rem;
}

.drop_name {
  font-size: var(--normal-font-size);
  color: var(--first-color);
  font-weight: 500;
}

.drop_profession {
  font-size: var(--smaller-font-size);
  color: var(--first-color-light);
}

.drop_social {
  margin: 0 0.375rem;
  color: var(--first-color-light);
  transition: 0.4s;
}

.drop_social:hover {
  color: var(--first-color);
}

/* Class name for the chosen item */

.sortable-chosen {
  box-shadow: 8px 8px 32px #e1e1e1;
}

/* Class name for the dragging item */

.sortable-drag {
  opacity: 0;
}

There is all css code for this project. After this project, we need JavaScript code for drag and drop functionality so see html Css code output and then write JavaScript for this project. Ecommerce Website Using Html Css And Javascript Html + Css Code Output Drag And Drop Using HTML,CSS and JavaScript

JavaScript Code For Drag And Drop:-

/*===== DRAG and DROP =====*/
const dropItems = document.getElementById('drop-items')

new Sortable(dropItems, {
    animation: 350,
    chosenClass: "sortable-chosen",
    dragClass: "sortable-drag"
});

Final Output Of Drag And Drop Using JavaScript:-

Drag And Drop Using HTML,CSS and JavaScript

100+ HTML,CSS and JavaScript Projects With Source Code ( Beginners to Advanced)

That’s it for this project, yes you see only 4 lines of JavaScript code but use Sortablejs so there is no need to write 100 lines of code for drag and drop project. In this project, we create Drag and Drop with help of Html, Css and JavaScript code. We share complete output so if you have any confusion Comment below or you can contact us by filling out our contact us form Home Section On Website.

Code By – Sanket Bodake

written by – Codewithrandom

Which code editor do you use for this Weather App project coding?

I personally recommend using VS Code Studio, it’s very simple and easy to use.

is this project responsive or not?

Yes! this project is a responsive project.

Do you use any external links to create this project?

No



Leave a Reply