In this blog you will see how we can drag and drop elements using jQuery’s draggable script. I will show how you can extend it to reorder elements.You can reoder the elements as per your choice.
What we will achieve at the end of this blogAt the end of this tutorial, we will have better understanding of how to perform drag and drop functionality and also will have Javascript code to do the same
Source code of the functionality Github Link
A quick demo to what you will achieve will help you visualise it even more.I have embeded a video for your reference so that you can visualize what to expect
Now lets look at the steps to achieve this functionality
Now,lets take a step back and look what jQuery's draggable functionality gives us in general
Suppose you have a div named "draggable" (or any other name for that matter). You can give it draggable functionality by attaching "draggable()" to it like shown below
For whole documentation please refer jQuery website. Link to jQuery Dragggable Documentation
In real time you may need a little bit more flexibility than what we saw above.You may get a set of data from backend which is displayed to the User and then the User may want to order it based on his choice.The simplest and most intuitive way for the User to reorder is by dragging elements and placing it over where they want it to be.
Lets see how we can achieve this.Doing hands on is the best way to understand it.Lets consider a scenario, where user gets a list of animals from backend/database which is displayed on the front end and then the user can reorder the animals based on his or her likings
In our eg, there are 2 major chunks. First, though not exactly related to drag and drop, we still need to generate the div's dynamically from the JSON response we get from backend.Second, is where action happens.We call makeMeDraggable() and makeMeDroppable() function of dragelements.js function.Below,lets see both of these steps in more detail
Part one: I dont want to setup a database and all for this eg.So to simulate backend, I created a simple JSON file sampleJson.js. It is a simple JSON object containing list of animals in an order.Below is the screenshot of the JSON file
So trigger the read, click on "click me" button.That calls "getData()" which makes an Ajax call and retrieves data from "sampleJson.js".We will just assume that our backend returns this JSON to us.The front end javascript will make an ajax call to the samplejson.js and get JSON as response. When running the index.html file, ensure that you run it on the server,otherwise you may get an Cross-Origin Resource Sharing (CORS).Incase you want to quickly test it out,without hassles of setting up Server, you can use IDE's like "Brackets" which has a "Live Preview" functionality.Clicking on "Live Preview" spins a built in server to show just the content statically(no back end logic)
Now in the html file, after we make the call and get the JSON back, we need to iterate through the response and display the results on front end. One thing to note is that we will be creating the div id's and name's dynamically.Other point worth mentioning is that "dragelements.js" is designed to look at any elements which has name starting with "draggable".Thats gives us flexibility to make any element draggable. PS: If you want you can download the "dragelements.js",tweak it according to your need.
Part two: Once you see the list of elements and the order, click on "Make Elements draggable and droppable" button, which in turn calls dragelements.js'smakeMeDraggable() and makeMeDroppable() functions.
So this ends this drag and drop tutorial. Am sure with this you can make changes and achieve much more.Hope it was helpful.Please feel free to leave comments or questions below
And that's it. Hope you undertood how to create Drag and Drop elements.Email me at "techspacedeck@gmail.com" incase you have queries. Alternatively, you can fill the "CONTACT" form or drop a comment below