Drag and Drop Sorting Listing Using Sortable JS

Drag and Drop Sorting Listing Using Sortable JS
Code Snippet:Drag and Drop w/ SortableJS
Author: Joshua Ward
Published: January 30, 2024
Last Updated: February 3, 2024
Downloads: 275
License: MIT
Edit Code online: CodeHim
Read More

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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X