Support us .Net Basics C# SQL ASP.NET Aarvi MVC Slides C# Programs Subscribe Download

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="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <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'
            });

            $('#divCountries').droppable({
                accept: 'li[data-value="country"]',
                drop: function (event, ui) {
                    $('#countries').append(ui.draggable);
                }
            });

            $('#divCities').droppable({
                accept: 'li[data-value="city"]',
                drop: function (event, ui) {
                    $('#cities').append(ui.draggable);
                }
            });
        });
    </script>
    <style>
        .divClass {
            border: 3px solid black;
            font-size: 25px;
            background-color: lightgray;
            width: 250px;
            padding: 5px;
            display: inline-table;
        }

        li {
            font-size: 20px;
        }
    </style>
</head>
<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>
                </ul>
        </div>

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

        <div class="divClass" id="divCities">
            Cities
            <ul id="cities"></ul>
        </div>
    </form>
</body>
</html>

jQuery tutorial for beginners

2 comments:

  1. great tutorial ..awesome

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

    ReplyDelete
  2. helper : clone is not working in my case... does any one has similar issue...i am using jquery-1.12.4 and jquery-ui.js -1.12.1 libraries ??

    ReplyDelete

It would be great if you can help share these free resources