Summary
Keywords
Full Transcript
Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/07/jquery-droppable-widget.html Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help. https://www.youtube.com/channel/UC7sEwIXM_YfAMyonQCrGfWA/?sub_confirmation=1 In this video we will discuss jQuery droppable widget Let us understand jQuery droppable widget with an example. 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>
Continue this lesson in the app
Install CourseHive on Android or iOS to keep learning while you move.
