Html-Elements-Smooth-Drag-And-Drop-Animation-html-css-shortable

Html Elements Smooth Drag And Drop Animation | HTML CSS And Sortable

"Html Elements Smooth Drag And Drop Animation" is designed using html, css along with the Sortable Javascript plugin. We published the article "How To Sort Alphabetically Html Unordered Elements Using JavaScript" which will help you to sort various elements of HTML. Here we are using a javascript plugin that makes all drag and drop processes easier. On this website, there are so many articles on different javascript plugins. You can checkout javascript plugins playlist.

In this article, you will learn how to create a smooth drag and drop animation using shortable.js, HTML and CSS. Shortable.js is a javascript library that can be used to create drag and drop functionality for any html element. Shortable.js can be used to implement various drag and drop interfaces since it is highly configurable. It is easy to use and compatible with all modern browsers and devices. It has no dependencies and is completely free to use. You just need to include the shortcode on the webpage.

The concept of "drag and drop animation" can be applied to create fun, engaging image profiles for celebrities, or any other type of person or object. To do this, you will need to gather four images of the subject, and then use a sortable Javascript plugin to apply the drag and drop effect.

If you want to learn more about website development, you need to do various projects on website development. We already published 100+ website development projects, so you can check them out for some inspiration. Additionally, there are some articles that are based on resources for website development. Reading these articles will make your web development learning process more easy and smooth.

01. HTML
02. CSS
03. SCRIPT
03. Output
04. Youtube Video
05. Source Code

HTML:

Below is the basic structure of the HTML document that includes all the dependencies. As you can see in the below structure.

<!DOCTYPE html>
<html>
<head>
  <title>Html Elements Smooth Drag And Drop Animation | Rustcode</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>

   //Body Content

<script src="script.js"></script>
</body>
</html>

We always add CSS files in the head part of HTML, while javascript or any other script in the bottom of the HTML documents. Here we are going to add one extra plugin "sortable".

https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js

We have added a "sortable" plugin link in the HTML document bottom. Now this document is ready to use "sortable" plugin functions.

<!DOCTYPE html>
<html>
<head>
  <title>Html Elements Smooth Drag And Drop Animation | Rustcode</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>

   //Body Content

<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<script src="script.js"></script>
</body>
</html>

Now, it's time to add the main content of the HTML document that will visible to the user. You can download all profile pictures from GitHub.

<!DOCTYPE html>
<html>
<head>
  <title>Html Elements Smooth Drag And Drop Animation | Rustcode</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>

<div class="card-main-wrapper">
  <div class="card-inner-wrapper" id="card-wrapper">

  <div class="card-container">
    <div class="card-data">
      <img src="hero01.png">
      <div>
        <h1 class="card-name">Spider Man</h1>
        <span class="card-work">Super Hero</span>
      </div>
    </div>
  </div>

  <div class="card-container">
    <div class="card-data">
      <img src="hero02.png">
      <div>
        <h1 class="card-name">Cristiano Ronaldo</h1>
        <span class="card-work">Footballer</span>
      </div>
    </div>
  </div>

  <div class="card-container">
    <div class="card-data">
      <img src="hero03.png">
      <div>
        <h1 class="card-name">Tony Stark</h1>
        <span class="card-work">Super Hero</span>
      </div>
    </div>
  </div>

  <div class="card-container">
    <div class="card-data">
      <img src="hero04.png">
      <div>
        <h1 class="card-name">Sachin Tendulkar</h1>
        <span class="card-work">Cricketer</span>
      </div>
    </div>
  </div>

  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<script src="script.js"></script>

</body>
</html>

Read Also:

CSS:

CSS is used to beautify the HTML document output. Already we have written the HTML code, now apply the beautification code.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700');

body{
  padding: 0px;
  margin: 0px;
  font-family: "Poppins", sans-serif;
}

.card-main-wrapper, .card-inner-wrapper{
  display: grid;
}

.card-main-wrapper{
  height: 100vh;
  align-items: center;
  justify-content: center;
}

.card-inner-wrapper{
  row-gap: 1rem;
  padding: 2.5rem;
  box-shadow: 4px 4px 4px 1px #E1E1E1;
  border-radius: 4px;
  background: #4CCDBD;
}

img{
  width: 70px;
  height: 70px;
  border-radius: 50%;
  margin-right: 1rem;
}

.card-container, .card-data{
  display: flex;
  align-items: center;
}

.card-container{
  width: 360px;
  justify-content: space-between;
  padding: 8px;
  background: #D7FFF6;
  cursor: pointer;
  border-radius: 2.5rem;
}

.card-name{
  margin: 0px;
  font-family: inherit;
  font-weight: 600;
  font-size: 16px;
}

.card-work{
  font-weight: 600;
  font-size: 14px;
  color: #303130;
}

.boxShadow{
  box-shadow: 8px 8px 32px #E1E1E1;
}

.drag{
  opacity: 0;
}

Read Also:

SCRIPT:

Below is the script that help us to create drag and drop animation in a few lines of code.

const cardWrapper = document.getElementById("card-wrapper");

new Sortable(cardWrapper,{
  animation: 360,
  chosenClass: "boxShadow",
  dragClass: "drag"
});

Read Also:

Output:

Youtube Video:

We also made a youtube video for "Html Elements Smooth Drag And Drop Animation", if you want to watch and want to learn every step of this design.

Source Code:

Before jumping in to download the source code. First, write this code yourself and then you can cross-check it with reference code.

Read Also:

Archive