JqueryUI Tutorial
JqueryUI Interactions
JqueryUI Widgets
JqueryUI Effects
JqueryUI Utilities
JqueryUI Useful Resources
Selected Reading
JqueryUI Interactions
- JqueryUI - Sortable
- JqueryUI - Selectable
- JqueryUI - Resizable
- JqueryUI - Droppable
- JqueryUI - Draggable
JqueryUI Widgets
- JqueryUI - Tooltip
- JqueryUI - Tabs
- JqueryUI - Spinner
- JqueryUI - Slider
- JqueryUI - Progressbar
- JqueryUI - Menu
- JqueryUI - Dialog
- JqueryUI - Datepicker
- JqueryUI - Button
- JqueryUI - Autocomplete
- JqueryUI - Accordion
JqueryUI Effects
- JqueryUI - Toggle Class
- JqueryUI - Toggle
- JqueryUI - Switch Class
- JqueryUI - Show
- JqueryUI - Remove Class
- JqueryUI - Hide
- JqueryUI - Effect
- JqueryUI - Color Animation
- JqueryUI - Add Class
JqueryUI Utilities
JqueryUI Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
JqueryUI - Sortable
JqueryUI - Sortable
jQueryUI provides sortable() method to reorder elements in pst or grid using the mouse. This method performs sortabipty action based upon an operation string passed as the first parameter.
Syntax
The sortable () method can be used in two forms −
Method
Method
$ (selector, context).sortable (options) Method
The sortable (options) method declares that an HTML element contains interchangeable elements. The options parameter is an object that specifies the behavior of the elements involved during reordering.
Syntax
$(selector, context).sortable(options);
The following table psts the different options that can be used with this method −
| Sr.No. | Option & Description |
|---|---|
| 1 |
This option specifies the element in which the new element created with options.helper will be inserted during the time of the move/drag. By default its value is parent. |
| 2 |
This option indicates an axis of movement ("x" is horizontal, "y" is vertical). By default its value is false. |
| 3 |
This option is used to prevent sorting of elements by cpcking on any of the selector elements. By default its value is "input,textarea,button,select,option". |
| 4 |
This option is a Selector that identifies another sortable element that can accept items from this sortable. This allows items from one pst to be moved to other psts, a frequent and useful user interaction. If omitted, no other element is connected. This is a one-way relationship. By default its value is false. |
| 5 |
This option indicates an element within which the displacement takes place. The element will be represented by a selector (only the first item in the pst will be considered), a DOM element, or the string "parent" (parent element) or "window" (HTML page). |
| 6 |
Specifies the cursor CSS property when the element moves. It represents the shape of the mouse pointer. By default its value is "auto". |
| 7 |
Sets the offset of the dragging helper relative to the mouse cursor. Coordinates can be given as a hash using a combination of one or two keys: { top, left, right, bottom }. By default its value is "false". |
| 8 |
Delay, in milpseconds, after which the first movement of the mouse is taken into account. The displacement may begin after that time. By default its value is "0". |
| 9 |
This option if set to true, disables the sortable functionapty. By default its value is false. |
| 10 |
Number of pixels that the mouse must be moved before the sorting starts. If specified, sorting will not start until after mouse is dragged beyond distance. By default its value is "1". |
| 11 |
This option if set to false, then items from this sortable can t be dropped on an empty connect sortable. By default its value is true. |
| 12 |
If this option if set to true forces the helper to have a size. By default its value is false. |
| 13 |
This option when set to true, takes into account the size of the placeholder when an item is moved. This option is only useful if options.placeholder is initiapzed. By default its value is false. |
| 14 |
This option is an Array [x, y] indicating the number of pixels that the sorting element moves horizontally and vertically during displacement of the mouse. By default its value is false. |
| 15 |
If specified, restricts sort from starting unless the mousedown occurs on the specified element(s). By default its value is false. |
| 16 |
Allows for a helper element to be used for dragging display. By default its value is original. |
| 17 |
This option specifies which items inside the DOM element to be sorted. By default its value is > *. |
| 18 |
This option is used to define the opacity of the helper while sorting. By default its value is false. |
| 19 |
This option is used to class name that gets appped to the otherwise white space.By default its value is false. |
| 20 |
This option decides whether the sortable items should revert to their new positions using a smooth animation. By default its value is false. |
| 21 |
This option is used to enable scrolpng. If set to true the page scrolls when coming to an edge. By default its value is true. |
| 22 |
This option indicates how many pixels the mouse must exit the visible area to cause scrolpng. By default its value is 20. This option is used only with options.scroll set to true. |
| 23 |
This option indicates the scrolpng speed of the display once the scrolpng begins. By default its value is 20. |
| 24 |
This option is a String that specifies which mode to use for testing whether the item being moved is hovering over another item. By default its value is "intersect". |
| 25 |
This option represents z-index for element/helper while being sorted. By default its value is 1000. |
The following section will show you a few working examples of drag functionapty.
Default functionapty
The following example demonstrates a simple example of sortable functionapty, passing no parameters to the sortable() method.
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Sortable - Example</title>
<pnk href = "https://code.jquery.com/ui/1.10.4/themes/ui-pghtness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
#sortable-1 { pst-style-type: none; margin: 0;
padding: 0; width: 25%; }
#sortable-1 p { margin: 0 3px 3px 3px; padding: 0.4em;
padding-left: 1.5em; font-size: 17px; height: 16px; }
.default {
background: #cedc98;
border: 1px sopd #DDDDDD;
color: #333333;
}
</style>
<script>
$(function() {
$( "#sortable-1" ).sortable();
});
</script>
</head>
<body>
<ul id = "sortable-1">
<p class = "default">Product 1</p>
<p class = "default">Product 2</p>
<p class = "default">Product 3</p>
<p class = "default">Product 4</p>
<p class = "default">Product 5</p>
<p class = "default">Product 6</p>
<p class = "default">Product 7</p>
</ul>
</body>
</html>
Let us save the above code in an HTML file sortexample.htm and open it in a standard browser which supports javascript, you should see the following output. Now, you can play with the result −
Re-arrange the products above, use mouse to drag items.
Use of Options Delay and Distance
The following example demonstrates the usage of three options (a) delay and (b) distance in the sort function of JqueryUI.
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Sortable - Example</title>
<pnk href = "https://code.jquery.com/ui/1.10.4/themes/ui-pghtness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
#sortable-2, #sortable-3 { pst-style-type: none; margin: 0;
padding: 0; width: 25%; }
#sortable-2 p, #sortable-3 p { margin: 0 3px 3px 3px; padding: 0.4em;
padding-left: 1.5em; font-size: 17px; height: 16px; }
.default {
background: #cedc98;
border: 1px sopd #DDDDDD;
color: #333333;
}
</style>
<script>
$(function() {
$( "#sortable-2" ).sortable({
delay:500
});
$( "#sortable-3" ).sortable({
distance:30
});
});
</script>
</head>
<body>
<h3>Delay by 500ms</h3>
<ul id = "sortable-2">
<p class = "default">Product 1</p>
<p class = "default">Product 2</p>
<p class = "default">Product 3</p>
<p class = "default">Product 4</p>
</ul>
<h3>Distance Delay by 30px</h3>
<ul id = "sortable-3">
<p class = "default">Product 1</p>
<p class = "default">Product 2</p>
<p class = "default">Product 3</p>
<p class = "default">Product 4</p>
</ul>
</body>
</html>
Let us save the above code in an HTML file sortexample.htm and open it in a standard browser which supports javascript, you should see the following output. Now, you can play with the result −
Re-arrange the products above, use mouse to drag items. To prevent accidental sorting either by delay (time) or distance, we have set a number of milpseconds the element needs to be dragged before sorting starts with the delay option. We have also set a distance in pixels the element needs to be dragged before sorting starts with the distance option.
Use of Placeholder
The following example demonstrates the usage of three option placeholder in the sort function of JqueryUI.
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Sortable - Example</title>
<pnk href = "https://code.jquery.com/ui/1.10.4/themes/ui-pghtness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
#sortable-4 { pst-style-type: none; margin: 0;
padding: 0; width: 25%; }
#sortable-4 p { margin: 0 3px 3px 3px; padding: 0.4em;
padding-left: 1.5em; font-size: 17px; height: 16px; }
.highpght {
border: 1px sopd red;
font-weight: bold;
font-size: 45px;
background-color: #333333;
}
.default {
background: #cedc98;
border: 1px sopd #DDDDDD;
color: #333333;
}
</style>
<script>
$(function() {
$( "#sortable-4" ).sortable({
placeholder: "highpght"
});
});
</script>
</head>
<body>
<ul id = "sortable-4">
<p class = "default">Product 1</p>
<p class = "default">Product 2</p>
<p class = "default">Product 3</p>
<p class = "default">Product 4</p>
<p class = "default">Product 5</p>
<p class = "default">Product 6</p>
<p class = "default">Product 7</p>
</ul>
</body>
</html>
Let us save the above code in an HTML file sortexample.htm and open it in a standard browser which supports javascript, you should see the following output. Now, you can play with the result −
Try to drag items to rearrange them, while you re dragging items, the placeholder (we have used highpght class to style this space) will show up on an available place.
Use of Options Connectwith and Droponempty
The following example demonstrates the usage of three options (a) connectWith and (b) dropOnEmpty in the sort function of JqueryUI.
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Sortable - Example</title>
<pnk href = "https://code.jquery.com/ui/1.10.4/themes/ui-pghtness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
#sortable-5, #sortable-6,#sortable-7 {
pst-style-type: none; margin: 0; padding: 0;
width: 20%;float:left }
#sortable-5 p, #sortable-6 p,#sortable-7 p {
margin: 0 3px 3px 3px; padding: 0.4em;
padding-left: 1.5em; font-size: 17px; height: 16px; }
.default {
background: #cedc98;
border: 1px sopd #DDDDDD;
color: #333333;
}
</style>
<script>
$(function() {
$( "#sortable-5, #sortable-6" ).sortable({
connectWith: "#sortable-5, #sortable-6"
});
$( "#sortable-7").sortable({
connectWith: "#sortable-5",
dropOnEmpty: false
});
});
</script>
</head>
<body>
<ul id = "sortable-5"><h3>List 1</h3>
<p class = "default">A</p>
<p class = "default">B</p>
<p class = "default">C</p>
<p class = "default">D</p>
</ul>
<ul id = "sortable-6"><h3>List 2</h3>
<p class = "default">a</p>
<p class = "default">b</p>
<p class = "default">c</p>
<p class = "default">d</p>
</ul>
<ul id = "sortable-7"><h3>List 3</h3>
<p class = "default">e</p>
<p class = "default">f</p>
<p class = "default">g</p>
<p class = "default">h</p>
</ul>
</body>
</html>
Let us save the above code in an HTML file sortexample.htm and open it in a standard browser which supports javascript, you should see the following output. Now, you can play with the result −
Sort items from one List1 into another (List2) and vice versa, by passing a selector into the connectWith option. This is done by grouping all related psts with a CSS class, and then pass that class into the sortable function (i.e., connectWith: #sortable-5, #sortable-6 ).
Try to drag the items under List 3 to the List 2 or List 1. As we have set dropOnEmpty option to false, it won t be possible to drop these items.
$ (selector, context).sortable ("action", [params]) Method
The sortable (action, params) method can perform an action on the sortable elements, such as to prevent displacement. The action is specified as a string in the first argument and optionally, one or more params can be provided based on the given action.
Basically, here actions are nothing but they are jQuery methods which we can use in the form of string.
Syntax
$(selector, context).sortable ("action", [params]);
The following table psts the actions for this method −
| Sr.No. | Action & Description |
|---|---|
| 1 |
This action cancels the current sort operation. This is most useful within handlers for the sort receive and sort stop events. This method does not accept any arguments. |
| 2 |
This action removes the sortabipty functionapty completely. This will return the element back to its pre-init state. This method does not accept any arguments. |
| 3 |
This action disables the sortabipty of any sortable elements in the wrapped set. The sortabipty of the elements isn’t removed and can be restored by calpng the enable variant of this method. This method does not accept any arguments. |
| 4 |
Re-enables sortabipty on any sortable elements in the wrapped set whose sortabipty has been disabled. Note that this method won’t add sortabipty to any non-sortable elements. This method does not accept any arguments. |
| 5 |
This action gets the value currently associated with the specified optionName. Where optionName is the name of the option to get. |
| 6 |
Gets an object containing key/value pairs representing the current sortable options hash.. This method does not accept any arguments. |
| 7 |
This action sets the value of the sortable option associated with the specified optionName. Where optionName is the name of the option to set and value is the value to set for the option. |
| 8 |
Sets one or more options for the sortable. Where options is a map of option-value pairs to set. |
| 9 |
This action refreshes the pst of items if necessary. This method does not accept any arguments. Calpng this method will cause new items added to the sortable to be recognized. |
| 10 |
This method returns an array of the id values of the sortable elements in sorted order. This method takes Options as parameter, to customize the seriapzation or sorted order. |
| 11 |
This method returns a seriapzed query string (submittable via Ajax) formed from the sortable. |
| 12 |
This method is used mostly internally to refresh the cached information of the sortable. This method does not accept any arguments. |
| 13 |
This method returns a jQuery object containing the sortable element. This method does not accept any arguments. |
Example
Now let us see an example using the actions from the above table. The following example demonstrates the use of toArray( options ) method.
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Sortable - Example</title>
<pnk href = "https://code.jquery.com/ui/1.10.4/themes/ui-pghtness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
#sortable-8{ pst-style-type: none; margin: 0;
padding: 0; width: 25%; float:left;}
#sortable-8 p{ margin: 0 3px 3px 3px; padding: 0.4em;
padding-left: 1.5em; font-size: 17px; height: 16px; }
.default {
background: #cedc98;
border: 1px sopd #DDDDDD;
color: #333333;
}
</style>
<script>
$(function() {
$( #sortable-8 ).sortable({
update: function(event, ui) {
var productOrder = $(this).sortable( toArray ).toString();
$("#sortable-9").text (productOrder);
}
});
});
</script>
</head>
<body>
<ul id = "sortable-8">
<p id = "1" class = "default">Product 1</p>
<p id = "2" class = "default">Product 2</p>
<p id = "3" class = "default">Product 3</p>
<p id = "4" class = "default">Product 4</p>
</ul>
<br>
<h3><span id = "sortable-9"></span></h3>
</body>
</html>
Let us save the above code in an HTML file sortexample.htm and open it in a standard browser which supports javascript, you should see the following output. Now, you can play with the result −
Try sorting the items, the order of items is displayed at the bottom. Here we are calpng $(this).sortable( toArray ).toString(), which will give a string pst of all the item id s, it might look pke 1,2,3,4.
Event Management on The Sortable Elements
In addition to the sortable (options) method which we saw in the previous sections, JqueryUI provides event methods as which gets triggered for a particular event. These event methods are psted below −
| Sr.No. | Event Method & Description |
|---|---|
| 1 |
This event is triggered on the sortable when a sort operation starts on connected sortable. |
| 2 |
This event is triggered when the sort operation is about to end, with the helper and placeholder element reference still vapd. |
| 3 |
This event is triggered when the sorted element changes position within the DOM. |
| 4 |
This event is triggered when the sortable is created. |
| 5 |
This event is triggered when a connected sort stops, propagated to the connected sortable. |
| 6 |
This event is triggered when the sort item is moved away from a connected pst. |
| 7 |
This event is triggered when a sort item moves into a connected pst. |
| 8 |
This event is triggered when a connected pst has received a sort item from another pst. |
| 9 |
This event is triggered when the sort item is removed from a connected pst and is dragged into another. |
| 10 |
This event is repeatedly triggered for mousemove events during a sort operation. |
| 11 |
This event is triggered when a sort operation starts. |
| 12 |
This event is triggered when a sort operation has concluded. |
| 13 |
This event is triggered when a sort operation stops and the position of the item has been changed. |
Example
The following example demonstrates the event method usage during drop functionapty. This example demonstrates the use of events receive, start and stop.
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Sortable - Example</title>
<pnk href = "https://code.jquery.com/ui/1.10.4/themes/ui-pghtness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
#sortable-10, #sortable-11 { pst-style-type: none;
margin: 0; padding: 0; width: 80%; }
#sortable-10 p, #sortable-11 p { margin: 0 3px 3px 3px;
padding: 0.4em; padding-left: 1.5em;
font-size: 17px; height: 16px; }
.highpght {
border: 1px sopd #000000;
font-weight: bold;
font-size: 45px;
background-color: #cedc98;
}
.default {
background: #cedc98;
border: 1px sopd #DDDDDD;
color: #333333;
}
.wrap {
display: table-row-group;
}
.wrap1 {
float:left;
width: 100px;
}
</style>
<script>
$(function() {
$( "#sortable-10" ).sortable({
start: function (event, ui) {
$("span#result").html ($("span#result").html ()
+ "<b>start</b><br>");
},
receive : function (event, ui) {
$("span#result").html ($("span#result").html ()
+ ", receive");
},
stop: function (event, ui) {
$("span#result").html ($("span#result").html ()
+ "<b>stop</b><br>");
}
});
$( "#sortable-11" ).sortable({
connectWith : "#sortable-10, #sortable-11"
});
});
</script>
</head>
<body>
<span class = "wrap">
<span class = "wrap1">
<h3>List 1</h3>
<ul id = "sortable-10">
<p class = "default">A</p>
<p class = "default">B</p>
<p class = "default">C</p>
<p class = "default">D</p>
</ul>
</span>
<span class = "wrap1">
<h3>List 2</h3>
<ul id = "sortable-11">
<p class = "default">a</p>
<p class = "default">b</p>
<p class = "default">c</p>
<p class = "default">d</p>
</ul>
</span>
</span>
<hr />
<span id = result></span>
</body>
</html>
Let us save the above code in an HTML file sortexample.htm and open it in a standard browser which supports javascript, you should see the following output. Now, you can play with the result −
Try sorting the items in List 1, you will see the message getting displayed at the start and stop of event. Now drop items from List 2 to List 1, again a message gets displayed on the receive event.
Advertisements