Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

jquery droppable widget

Suggested Videos
Part 91 - jquery button widget
Part 92 - jquery draggable widget
Part 93 - Draggable element on top

In this video we will discuss jQuery droppable widget

Let us understand jQuery droppable widget with an example. 
jquery droppable widget

1. From the first box, we want to be able to drag and drop countries on to Countries box, and cities on to Cities box
2. If I try to drop a country on to the City box, or a city on to the Country box, it should not be allowed and the element should revert to it's original position

To achieve this we are going to make use of both draggable and droppable widgets

<%@ Page Language="C#" AutoEventWireup="true"
    CodeBehind="WebForm1.aspx.cs" Inherits="Demo.WebForm1" %>

<!DOCTYPE html>
<html xmlns="">
<head runat="server">
    <script src="jquery-1.11.2.js"></script>
    <script src="jquery-ui.js"></script>
    <link href="jquery-ui.css" rel="stylesheet" />
    <script type="text/javascript">
        $(document).ready(function () {
            $('#source li').draggable({
                helper: 'clone',
                revert: 'invalid'

                accept: 'li[data-value="country"]',
                drop: function (event, ui) {

                accept: 'li[data-value="city"]',
                drop: function (event, ui) {
        .divClass {
            border: 3px solid black;
            font-size: 25px;
            background-color: lightgray;
            width: 250px;
            padding: 5px;
            display: inline-table;

        li {
            font-size: 20px;
<body style="font-family: Arial">
    <form id="form1" runat="server">
        <div class="divClass">
            Countries & Cities
                <ul id="source">
                    <li data-value="country">USA</li>
                    <li data-value="country">India</li>
                    <li data-value="country">UK</li>
                    <li data-value="city">New York</li>
                    <li data-value="city">Chennai</li>
                    <li data-value="city">London</li>

        <div class="divClass" id="divCountries">
            <ul id="countries"></ul>

        <div class="divClass" id="divCities">
            <ul id="cities"></ul>

jQuery tutorial for beginners

1 comment:

  1. great tutorial ..awesome

    sir can u please write a tutorial for the editable drop-down with auto-complete feature ????


If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.