Drag and Drop example with jQuery

This tutorial shows an example on how to drag-and-drop the item to the specific location. For drag-and-drop functionality please refer to http://jqueryui.com/
Drag-and-Drop can be very useful to interact with the web application. We often use drag-and-drop features in many areas like

  •     moving email from inbox to different folders
  •     ordering of the list items in a web page
  •     moving objects in game such as moving cards from one place to another

Drag-and-Drop implementation using JavaScript is very difficult for cross-browser version working but now-a-days it’s very easy using jQuery UI framework.
I will explain drag-and-drop feature with an example. This example consists of few colors and we have same number of empty slots as many as colors. So here we have to drag the color and drop the color to the appropriate empty slot. If you cannot put the color on the correct empty slot then you will get an error message otherwise if all empty slots are filled with the correct color then you will get success message at the end.

Prerequisites

Knowledge of HTML, CSS, JavaScript/jQuery

http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js

Either you can use CDN or you can also download the file from the above links and use locally.

HTML part

Inside <body/> tag of the HTML file put the below content

 

CSS part

We will add some style to the drag-and-drop example.

 

jQuery

Now we will look at the jquery part where actually drag-and-drop happens

 

Put all together

 

 

Screen Output

jQuery drag-and-drop example
Thanks for reading. Please do not forget to leave a comment.

Soumitra

Software Professional, I am passionate to work on web/enterprise application. For more information please go to about me. You can follow on Twitter. You can be a friend on Facebook or Google Plus or Linkedin

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.