You are currently viewing Drag And Drop Using Html Css Javascript|complete Source Code

Drag And Drop Using Html Css Javascript|complete Source Code

Drag And Drop Using Html Css Javascript | complete 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. 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 Section

<!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

html code drag drop

html code drag drop

html code drag drop

Css Section

/*===== 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

Css Code Output

css code drag drop

Javascript Section

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

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

Final Output

Js code drag drop

 

That’s it for this project, yes you see only 4 lines of JavaScript code but use Sortablejs so there is no need to writes 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 fill our contact us form form home section. 🤞🎉

Code By – Sanket Bodake

written by – Codewithrandom

Leave a Reply