Drag and Drop Sorting Listing Using Sortable JS

This code snippet helps you to create a drag-and-drop sorting listing using Sortable JS. It comes with a smooth drag-and-drop functionality within a stylish UI. The main functionality lies in dynamically sorting list items, enhancing user experience by allowing easy rearrangement.

How to Create Drag and Drop Sorting Listing Using Sortable JS

1. First of all, load the Google Fonts and Font Awesome CSS by adding the following CDN links into the head tag of your HTML document.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600&display=swap" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css'>

2. Create the HTML structure for your list. Use the following code as a template, and customize the details such as names, roles, and social links for each team member within the <article> elements inside the #team-members container.

<div id="team-members">
  <article class="team-member"><img class="team-member-avatar" src="https://eu.ui-avatars.com/api/?name=Cosmo Kramer&amp;size=250" alt="Team Member"/>
    <div class="team-member-name">
      <h3>Cosmo Kramer</h3>
      <p>New York Man of Mystery</p>
    </div>
    <ul class="social-links">
      <li><a href="#"><i class="fa-brands fa-linkedin"></i></a></li>
      <li><a href="#"><i class="fa-brands fa-x-twitter"></i></a></li>
      <li><a href="#"><i class="fa-brands fa-github"></i></a></li>
    </ul>
  </article>
  <article class="team-member"><img class="team-member-avatar" src="https://eu.ui-avatars.com/api/?name=George Costanza&amp;size=250" alt="Team Member"/>
    <div class="team-member-name">
      <h3>George Costanza</h3>
      <p>Architect</p>
    </div>
    <ul class="social-links">
      <li><a href="#"><i class="fa-brands fa-linkedin"></i></a></li>
      <li><a href="#"><i class="fa-brands fa-x-twitter"></i></a></li>
      <li><a href="#"><i class="fa-brands fa-github"></i></a></li>
    </ul>
  </article>
  <article class="team-member"><img class="team-member-avatar" src="https://eu.ui-avatars.com/api/?name=Elaine Benes&amp;size=250" alt="Team Member"/>
    <div class="team-member-name">
      <h3>Elaine Benes</h3>
      <p>Writer</p>
    </div>
    <ul class="social-links">
      <li><a href="#"><i class="fa-brands fa-linkedin"></i></a></li>
      <li><a href="#"><i class="fa-brands fa-x-twitter"></i></a></li>
      <li><a href="#"><i class="fa-brands fa-github"></i></a></li>
    </ul>
  </article>
</div>

3. The CSS code defines the styling for your list items and ensures a visually appealing layout. Feel free to adjust the styles according to your website’s theme. The provided CSS includes properties for layout, background, shadows, and more.

:root {
  --background: #EDEEF7;
  --gray: #EDEEF7;
  --white: #ffffff;
  --poppins: "Poppins", sans-serif;
  --shadow-opacity: 0.30;
  --blur: 10px;
}

body{
  font-family: var(--poppins), sans-serif;
  font-size: 1rem;
  background-image: url("https://images.pexels.com/photos/13574114/pexels-photo-13574114.jpeg?auto=compress&cs=tinysrgb&w=1600&lazy=load") !important;
  background-position: center center;
  background-size: cover;
  display: flex;
  width: 100vw;
  height: 100vh;
}

*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
}

#team-members {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 550px;
  margin: auto;
  padding: 50px;
  background: rgba(255, 255, 255, 0.25);
  -webkit-backdrop-filter: blur(var(--blur));
          backdrop-filter: blur(var(--blur));
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  filter: drop-shadow(0px 20px 10px rgba(0, 0, 0, var(--shadow-opacity)));
}

.team-member {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  min-height: 60px;
  padding: 16px;
  background-color: var(--white);
  border-radius: 24px;
  font-size: 16px;
  z-index: 1;
}
.team-member:hover {
  cursor: -webkit-grab;
  cursor: grab;
}
.team-member-avatar {
  width: 3.75rem;
  height: 3.75rem;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
}
.team-member-name {
  display: grid;
  gap: 0.125rem;
}
.team-member-name h3 {
  font-size: large;
}
.team-member-name p {
  font-size: smaller;
}
.team-member-chosen {
  box-shadow: 8px 8px 32px rgba(0, 0, 0, 0.3);
}
.team-member-drag {
  opacity: 0;
}

.social-links {
  display: flex;
  flex-direction: row;
  gap: 6px;
  margin-left: auto;
  padding: 0;
  list-style-type: none;
}
.social-links i {
  width: 1.25rem;
  height: 1.25rem;
  font-size: 1.25rem;
}

4. Now, load the Sortable JS by adding the following CDN link just before closing the body tag:

<script src='https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.js'></script>

5. Finally, include the following JavaScript code between <script> tag at the end of your HTML document, just before the closing </body> tag.

const dragAndDropItems = document.getElementById('team-members');

new Sortable(dragAndDropItems, {
	animation: 350,
	chosenClass: 'team-member-chosen',
	dragClass: 'team-member-drag'
});

That’s all! hopefully, you have successfully created drag and drop sorting list on your website. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.