Lexington has been awarded a grant from Astro, to celebrate. Get a 30% discount. Apply code LEXINGTON30 ( uppercase ) at checkout.
Today we are doing something fun with JavaScript and Tailwind CSS using Sortable.js.
A drag and drop is a way to move an item from one place to another. It is a common way to move things around on a computer screen. You can drag and drop files, images, or text from one place to another.
and many other uses cases
Sortable.js is a JavaScript library that allows you to create drag and drop functionality in your web application.
It allows yo to create:
It supports various frameworks: Vue, React, Angular, jQuery, Knockout, Meteor, Polymer and Ember
the first thing we could do is to grab the CDN, you can also download the file and include it in your project, but for brevity I’ll use the CDN.
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.14.0/Sortable.min.js"></script>
This is the structure of the project: Understanding the code:
id="movable-items"
: This is the ID for the drag and drop container.<div class="movable-item ..."> Item 1 </div>
: This is the markup for the items in the drag and drop container. As you can see, each item has a class of movable-item
. This class is used to grab the item with JavaScript.Irrelveant classes are removed for brevity, but I’ll keep those classes relevant to the tutorial.
<div
id="movable-items"
class="...">
<!-- Items in the Grid -->
<div
class="movable-item ...">
Item 1
</div>
<!-- IMore items go here. Add the class movable-item to each of them-->
</div>
const dragAndDropItems = document.getElementById("movable-items");
: This is the ID for the drag and drop container.new Sortable(dragAndDropItems, {
: This is the code that creates the drag and drop functionality.animation: 350,
: This is the animation speed of the drag and drop.chosenClass: "shadow-2xl",
: This is the class that is added to the item when it is being dragged. const dragAndDropItems = document.getElementById("movable-items");
new Sortable(dragAndDropItems, {
animation: 350,
chosenClass: "shadow-2xl",
});
This is a simple drag and drop that can be used for any type of content, such as a product listing, blog posts, news articles, or image galleries. Explore what Sortable.js can do for you and see how it can be used in your own projects.
Hope you enjoyed this tutorial and have a great day!
/Michael Andreuzza
Get lifetime access to every theme available today for $199 and own
them forever. Plus, new themes, lifetime updates, use on unlimited
projects and enjoy lifetime support.
— No subscription required!