Drag And Drop Elements 04th Jan 2020

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 blog

At 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

    JS to be downloaded
  • jQuery Link to download
  • jQuery UI Link to download
  • jQuery Tmpl (Though jQuery template has nothing to do with draggable elements in particular I am using it that I can add script as a template and we will need it in our eg) Link to download

Now lets look at the steps to achieve this functionality

  • Create a custom folder and create an Index.html file
  • Create a JS file called "dragelements.js” and add reference to that file in our index.html file
  • dragelements.js is the file i created where all the action related to drag and drop happens.
  • Also, add references to all jQuery, jQueryUI, jQueryTmpl javascripts in the index.html page

Now,lets take a step back and look what jQuery's draggable functionality gives us in general

jQuery's Draggable functionality

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

<script> $( function() { $( "#draggable" ).draggable(); } ); </script> <body> <div id="draggable" class="ui-widget-content"> <p>Drag me around</p> </div> </body>

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

json sample

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.

    makeMeDraggable() function:
  • makes the element draggable
  • jQuery's draggable provides us with various events Eg
    • containment
    • appendTo
    • clone
    • revert
    • helper
    • containment
  • For all events please refer jQuery's documentation
    makeMeDroppable() function:
  • We use "drop" event when an element is dropped over.
  • Drop() internally calls "stickElement" function which updates the dom.So the user sees the dragged element is sticked above the dropped over element
      For eg, if you had 4 animals in below order
    • Cat
    • Dog
    • Elephant
    • Lion

      and you dragged "Lion" and dropped it on top of "Dog" elem, then the new order becomes
    • Cat
    • Lion
    • Dog
    • Elephant

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

Did you like the blog or have questions, please add your comments