Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

jQuery sortable widget

Suggested Videos
Part 96 - jQuery Resizable Widget
Part 97 - jQuery selectable widget
Part 98 - jQuery selectable filter



In this video we will discuss jQuery sortable widget.



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

jQuery sortable widget

<%@ 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({
                placeholder: 'placeholder',
                axis: 'y',
                opacity: 0.5,
                items: 'li[data-value="weekday"]'
            });
        });
    </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
        }
        .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'
            });

            //OR
            //$('#list1, #list2').sortable({
            //    connectWith: 'ul[data-value="connect"]'
            //});
        });
    </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>

jQuery tutorial for beginners

No comments:

Post a Comment

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.