Easy to Make Drag and Drop sortable list

Easy to Make Drag and Drop sortable list | tryIt

In this article, we will create a drag-and-drop sortable list using HTML, CSS, and JavaScript. This interactive feature will allow users to reorder items in a list by simply dragging and dropping them.
Also, watch YouTube to gain a better understanding.

HTML

<div id="team-members">
        <article class="team-member">
            <img class="team-member-avatar" src="assets/james.jpg" alt="James Alexander">
           
              <div class="team-member-name">
                <h3>James Alexander</h3>
                <p>Full-Stack Developer</p>
            </div>
            <ul class="social-links">
                <li>
                    <a href="#">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                            class="feather feather-linkedin">
                            <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z">
                            </path>
                            <rect x="2" y="9" width="4" height="12"></rect>
                            <circle cx="4" cy="4" r="2"></circle>
                        </svg>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                            stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
                            stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                            <path d="M4 4l11.733 16h4.267l-11.733 -16z"></path>
                            <path d="M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772"></path>
                        </svg>
                    </a>
                </li>
                <li>
                    <a href="#"><svg xmlns="http://www.w3.org/2000/svg"
                            class="icon icon-tabler icon-tabler-brand-github" width="24" height="24" viewBox="0 0 24 24"
                            stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
                            stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                            <path
                                d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5">
                            </path>
                        </svg></a>
                </li>
            </ul>
        </article>
        <article class="team-member">
            <img class="team-member-avatar" src="assets/liliya.jpg" alt="Lilia Williams">
            <div class="team-member-name">
                <h3>
                    Lilia Williams
                </h3>
                <p>
                    UX/UI Designer
                </p>
            </div>
            <ul class="social-links">

<li>
                    <a href="#">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                            class="feather feather-linkedin">
                            <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z">
                            </path>
                            <rect x="2" y="9" width="4" height="12"></rect>
                            <circle cx="4" cy="4" r="2"></circle>
                        </svg>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                            stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
                            stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                            <path d="M4 4l11.733 16h4.267l-11.733 -16z"></path>
                            <path d="M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772"></path>
                        </svg>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="assets/instagram.svg" alt="Instagram">
                    </a>
                </li>
            </ul>
        </article>
        <article class="team-member">
            <img class="team-member-avatar" src="assets/alex.jpg" alt="Alexander Smith">
            <div class="team-member-name">
                <h3>
                    Alexander Smith
                </h3>
                <p>
                    Product Manager
                </p>
            </div>
            <ul class="social-links">
                <li>
                    <a href="#">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                            class="feather feather-linkedin">
                            <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z">
                            </path>
                            <rect x="2" y="9" width="4" height="12"></rect>
                            <circle cx="4" cy="4" r="2"></circle>
                        </svg>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                            stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
                            stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                            <path d="M4 4l11.733 16h4.267l-11.733 -16z"></path>
                            <path d="M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772"></path>
                        </svg>
                    </a>
                </li>
            </ul>
        </article>
        <article class="team-member">
            <img class="team-member-avatar" src="assets/melissa.jpg" alt="Melissa Taylor">
            <div class="team-member-name">
                <h3>
                    Melissa Taylor
                </h3>
                <p>
                    Data Science
                </p>
            </div>
            <ul class="social-links">
                <li>
                    <a href="#">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                            class="feather feather-linkedin">
                            <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z">
                            </path>
                            <rect x="2" y="9" width="4" height="12"></rect>
                            <circle cx="4" cy="4" r="2"></circle>
                        </svg>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                            stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
                            stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                            <path d="M4 4l11.733 16h4.267l-11.733 -16z"></path>
                            <path d="M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772"></path>
                        </svg>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-github"
                            width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
                            fill="none" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                            <path
                                d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5">
                            </path>
                        </svg>
                    </a>
                </li>
            </ul>
        </article>
    </div>

CSS

:root {
    --primary: #0969DA;
    --background: #EDEEF7;
    --gray: #EDEEF7;
    --white: #FCFCFC;
    --navbar-height: 60px;
}

body {
    font-family: "Red Hat Display", 
        sans-serif;
    font-size: 16px;
    background-color: var(--background);
    display: flex;
    height: 100vh;
    width: 100vw;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#team-members {
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    max-width: 400px;
    width: 100%;
    background-color: var(--white);
    border-radius: 32px;
    box-shadow: 
     rgba(0, 0, 0, 0.05) 0px 6px 24px 0px;
}

.team-member {
    position: relative;
    z-index: 1;
    min-height: 60px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    border-radius: 24px;
    font-size: 16px;
    padding: 16px;
    align-items: center;
    background-color: var(--white);
    box-shadow: 
     rgba(0, 0, 0, 0.05) 0px 6px 24px 0px;
}

.team-member:hover {
    cursor: grab;
}

.social-links {
    list-style-type: none;
    padding: 0;
    display: flex;
    margin-left: auto;
    gap: 6px;
    flex-direction: row;
}

.social-links img {
    height: 20px;
    width: 20px;
}

.team-member-avatar {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 50%;
}

.team-member-socials {
    display: flex;
    gap: 8px;
}

.team-member-name {
    display: grid;
    gap: 2px;
}

.team-member-name h3 {
    font-size: large;
}

.team-member-name p {
    font-size: smaller;
}

.team-member-chosen {
    box-shadow: 8px 8px 32px #E1E1E1;
}

.team-member-drag {
    opacity: 0;
}

@media (max-width: 400px) {
    .social-links {
        display: none;
    }
}

Easy to Make Drag and Drop sortable list | tryIt

HTML

CSS

JavaScript

Output