| jqueery soratable
widget |
|
|
|
| we will discuss jQuery sortable widget
with examples. |
|
|
using this we can sort means drag andplace at another place like window |
| jQuery sortable widget allow elements to
be reordered. |
|
|
|
| The following example |
|
| 1. Allows weekdays Monday to Friday to be
reordered |
|
| 2. To make the list sortable we are using
jQuery sortable widget |
|
| 3.
placeholder option specifies the style class that we want to apply to the
location where the item will be dropped. If this option is not specified a
white space will be displayed by default. |
| 4. axis option is being used to restrict
dragging to y-axis |
|
| 5. opacity option controls the opacity of
the helper while sorting |
|
| 6. items
option specifies which items of the element should be sortable |
|
|
| <%@ 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 () { |
|
| $('#sortable').sortable({ |
whenever sortable event happens, implement this functiion |
| placeholder: 'placeholder', |
if we drag, some white space is at backside, that white space is called
as placeholder, opr we are placing at some on, that will drag to some down,
it creates some white space |
| axis: 'y', |
to drag only verticallly |
| opacity: 0.5, |
while dragging decrese opacity, we are dragging some item, that called as
helper |
| items:
'li[data-value="weekday"]' |
we can drag only some value |
| }); |
|
| }); |
|
| </script> |
|
| <style> |
|
| .ui-sortable-handle{ |
|
| background-color: green; |
|
| color:white |
|
| } |
|
| li { |
|
| border: 1px solid black; |
|
| padding: 10px; |
|
| cursor: pointer; |
|
| margin: 3px; |
|
| width: 300px; |
|
| height:15px; |
|
| color: black; |
|
| list-style-type:none |
not bullet list |
| } |
|
| .placeholder { |
|
| border: 1px solid black; |
|
| padding: 10px; |
|
| margin: 3px; |
|
| width: 300px; |
|
| height:15px; |
|
| background-color: silver; |
|
| } |
|
| </style> |
|
| </head> |
|
| <body
style="font-family: Arial"> |
|
| <form id="form1"
runat="server"> |
|
| <ul id="sortable"> |
|
| <li
data-value="weekday">Monday</li> |
|
| <li
data-value="weekday">Tuesday</li> |
|
| <li
data-value="weekday">Wednesday</li> |
|
| <li
data-value="weekday">Thursday</li> |
|
| <li
data-value="weekday">Friday</li> |
|
| <li
data-value="weekend">Saturday</li> |
|
| <li
data-value="weekend">Sunday</li> |
|
| </ul> |
|
| </form> |
|
| </body> |
|
| </html> |
|
|
|
| The
following example sort items from one list into another and vice versa. To
make this possible we are using connectWith option. |
|
|
| jquery sortable connectwith
example |
|
|
|
| <%@ 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 () { |
|
| $('#list1, #list2').sortable({ |
|
| connectWith: '#list1,#list2' |
if we not use, we cant drag left to right and right to left, to drag left
to right and right to left use connectwith |
| }); |
if we only specify list1, we can drag list1 to list 1 or list1 to list 2
only, if we specify both lists, we can drag anything to anything |
|
|
| //OR |
|
| //$('#list1, #list2').sortable({ |
|
| // connectWith:
'ul[data-value="connect"]' |
above this same |
| //}); |
|
| }); |
|
| </script> |
|
| <style> |
|
| .ui-sortable-handle { |
|
| background-color: green; |
|
| color: white; |
|
| } |
|
|
|
| ul { |
|
| float: left; |
|
| } |
|
|
|
| li { |
|
| border: 1px solid black; |
|
| padding: 10px; |
|
| cursor: pointer; |
|
| margin: 3px; |
|
| width: 50px; |
|
| color: black; |
|
| list-style-type: none; |
|
| } |
|
| </style> |
|
| </head> |
|
| <body
style="font-family: Arial"> |
|
| <form id="form1"
runat="server"> |
|
| <ul id="list1"
data-value="connect"> |
|
| <li>1</li> |
|
| <li>2</li> |
|
| <li>9</li> |
|
| <li>4</li> |
|
| <li>10</li> |
|
| </ul> |
|
|
|
| <ul id="list2"
data-value="connect"> |
|
| <li>6</li> |
|
| <li>5</li> |
|
| <li>8</li> |
|
| <li>3</li> |
|
| <li>7</li> |
|
| </ul> |
|
| </form> |
|
| </body> |
|
| </html> |
|
| sortable |
| placeholder |
| axis |
| opacity |
| items |
| ui-sortable-handle |
| data-value |
| sortable |
| connectwith |
|
|
|
|
No comments:
Post a Comment