Today, I will show you a really good feature of jQuery (and more precisely jQuery UI) which will allow you to implement a vertical drag and drop system on your website.

It can be used to make a website builder, a customizable dashboard for your users or many other creative front-end ideas you could have.

In my case, I recently had to implement a vertical drag and drop system like this on one of my clients website to allow him to build online courses and reorder elements on the page.

Check the demo of this drag and drop system in action here :

See Demo

As you can see it’s really intuitive and I will show you how to replicate this on your website.

Implementing jQuery UI Drag and Drop on your Website

First of all, let’s start by checking the dependencies I use on my demo website :

  • jQuery (we are on jQuery-Script.com so I’m sure you expected that ;-))
  • jQuery UI : which provides the actual sortable / draggable feature
  • Bootstrap 4 : Absolutely not a requirement but I use it for the “cards” design on my demo website
  • Font-Awesome : Not a requirement either but I use it for the drag / drop icon (I could also have used a simple image, of course)

So the mandatory libraries that you will need are jQuery and jQuery UI. I expect you already have jQuery on your website and you can download jQuery UI here.

Once you have downloaded it, transfer the file jquery-ui.min.css and jquery-ui.min.js to your website.

Then, import the CSS in your <head> :

<link rel="stylesheet" href="css/jquery-ui.min.css">

And for the JS, here are the minimum requirements :

<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>

In this article, I won’t enter in the details of the CSS of my demo, you can download the sources at the end of this article and check how it is made. I guess you are here more for the JS part 😉

Making the HTML Structure

Once you have the imports in place, let’s work and analyze the HTML structure. In my case, as I said, I use the Bootstrap 4 framework, but of course it’s not a requirement. I use it for the components it brings, like the cards you can see in my demo.

First of all, in terms of HTML structure, you will need a parent div that will contain all of the elements you want to drag. Let’s call it “cards” :

<div class="cards">
</div>

In this “.cards” container, one child div that we will put here represent one block that can be dragged. So in my case, each child is a card like this :

<div class="cards">
	<div class="card">
		<p>Some text here...</p>
	</div>
	
	<div class="card">
		<p>Some text here...</p>
	</div>
	
	<div class="card">
		<p>Some text here...</p>
	</div>
</div>

As you can see here, we will have a total of 3 blocks that can be moved.

The last part of the HTML structure is to add a drag “handle”. In my demo, it’s represented by this little Font-Awesome icon :

You can use an image or an icon, or even a simple text. You will need to give a class name (.drag-container in my case) to this drag handle and have it inside each of your draggable element. 

<div class="cards">
	<div class="card">
		<div class="drag-container">
			<i class="fas fa-bars"></i>
		</div>
		<p>Some text here...</p>
	</div>
	
	<div class="card">
		<div class="drag-container">
			<i class="fas fa-bars"></i>
		</div>
		<p>Some text here...</p>
	</div>
	
	<div class="card">
		<div class="drag-container">
			<i class="fas fa-bars"></i>
		</div>
		<p>Some text here...</p>
	</div>
</div>

OK, all of our HTML part is in place, you can add some CSS on it (like it did in the demo). But now, the fun part, the jQuery one!

Applying our jQuery Plugin on the HTML

Actually you will be surprised about how easy it is to make it work once your imports and HTML structure are in place. All you have to do is applying the jQuery sortable feature on your .cards container :

$( ".cards" ).sortable({
	handle: ".drag-container",
	axis: 'y'
});

We have two options on this code. The first one “handle” represents the class name which is used to actually know which element will be used to drag / sort the cards and “axis” tells the plugin that we only want to be able to drag vertically. You can remove this last option if you want the user to be able to move the elements everywhere.

So, it was not that complicated isn’t it 😉 ?

You can find the complete documentation and demo about the jQuery UI sortable plugin here.

Feel free to download the sources of the demo here :

Download Sources

If you have any questions, need any help or want to say something, feel free to leave a comment below…

… and don’t forget to subscribe if you want to receive new unique tutorials and source codes directly on your email :