| 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({ |
drag the li items, |
| helper: function(0{ return
'<b><u>' + $(this).text()+ '</u></b>'}, |
|
| helper: 'clone', |
if we drag , we can get the copy, original is always there |
| revert: 'invalid' |
we are dragging into cities and coutry, if we drag cities to coutry, its
not accepting means it is invalid, its not in space, it comes back to big
list that is called revert |
| }); |
|
|
|
| $('#divCountries').droppable({ |
|
| accept:
'li[data-value="country"]', |
accept only list items only which have data valye country |
| drop: function (event, ui) { |
if any comes using drag from big list, we have to drop on small lists,
drop event occurs, it appends at enddorppable , an event- |
|
$('#countries').append(ui.draggable); |
|
| } |
|
| }); |
|
|
|
| $('#divCities').droppable({ |
|
| accept:
'li[data-value="city"]', |
accept only list items only which have data items |
| 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> |
|
|
|
|
|
| Options
/ events to customize the jQuery droppable widget |
|
|
| over - This event is triggered
when an acceptable draggable is dragged over the droppable |
we dropped countris item on
countries list |
|
we can do change the background color if we drag an acceptable list itme,
after out from acceptable- there is is no change incolor |
| out - This event is triggered
when an acceptable draggable is dragged out of the droppable |
if it acceptable items went to that div, it chnages color, on some
reasons we takne back , then alson not
change the color, for that purpose , we do this out, |
|
|
| activate - This event is
triggered when an acceptable draggable starts dragging |
whenever u start dragging, activate event activates, it changes that
respective item color changs |
|
|
| deactivate - This event is
triggered when an acceptable draggable stops dragging |
whenever u drop on main items in reverse, deactivate event occurs means
we dragged immediately or we went to anohter item, and come back , this event
item occurs |
|
|
| activeClass - The specified
class will be applied to the droppable while an acceptable draggable is being
dragged |
it is acombination of activate and deactivate |
|
|
| hoverClass - The specified
class will be applied to the droppable while an acceptable draggable is being
hovered over the droppable |
if the any item hover on the lists, change the color background |
|
|
| The
helper option of draggable widget specifies the element that you want to use
as a helper while dragging the draggable. This option supports multiple types
- string or function. |
|
|
| String:
If set to "clone", then the element will be cloned and the clone
will be dragged. |
|
|
| Function:
A function that will return a DOMElement to use while dragging. |
|
|
| $('#divcountries').droppable({ |
|
| accept:
'li[data-value='country']', |
|
| activeClass: 'highlight', |
|
| activate: function(event, ui){ |
|
| $(this).addclass('highlight'); |
|
| }, |
|
| deactivate:function (event,
ui){ |
|
| $(this).removeclass('highlight'); |
|
| }, |
|
| hoverclass: 'highlight', |
|
| over: function(event, ui){ |
|
| $(this).removeclass('highlight'); |
|
| }, |
|
|
|
|
|
 |
|
| draggable |
| helper |
| revert |
| droppable |
| append |
| accept |
| drop |
| over |
| out |
| activate |
| deactivate |
| activeclass |
| hoverclass |
| string |
| function |
| droppable |
| accept |
| activeclass |
| activate |
| this |
| addclass |
| deactivate |
| removeclass |
| hoverclass |
| over |
| removeclass |
|
|
|
|
|
|
|
|
|
|
|
| how to make a game
using drag like drag the countries list to countries and citits leist to
cities |
| while draggin g , it will drop at some
place , how to generate droppable event |
| how to accept that list items only if
drops |
| how to write if list is dropped, some css happened |
|
|
|
|
|
|
|
|
|
|
No comments:
Post a Comment