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.
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
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.
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>
great tutorial ..awesome
ReplyDeletesir can u please write a tutorial for the editable drop-down with auto-complete feature ????
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