Thursday, February 21, 2013

Drag and drop html list item with in list using jQuery

Here, I will show you a simple example of rearranging the HTML list item through drag and drop functionality using jQuery. Here in this example, I have used the jQuery List DragSort plugin . You can download this plugin from here.

To implement this we need to write the code like as shown below

 
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ListDragSortDemo._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.dragsort-0.5.1.min.js" type="text/javascript"></script>
    <style type="text/css">
        #demolist
        {
            width: 350px;
            list-style-type: none;
            margin: 0px;
        }
        #demolist li
        {
            float: left;
            padding: 5px;
            width: 100px;
            height: 100px;
        }
        #demolist div
        {
            width: 90px;
            height: 50px;
            border: solid 1px black;
            background-color: #E0E0E0;
            text-align: center;
            padding-top: 40px;
        }
        .placeHolder div
        {
            background-color: white !important;
            border: dashed 1px gray !important;
        }
    </style>  
</head>
<body>
    <form id="form1" runat="server">
    <ul id="demolist">
              <li><div>Item1</div></li>
              <li><div>Item2</div></li>
              <li><div>Item3</div></li>
              <li><div>Item4</div></li>
              <li><div>Item5</div></li>
              <li><div>Item6</div></li>        
       </ul>
    <script type="text/javascript">
        //to make the list dragable
        $("#demolist").dragsort(
        {
            dragSelector: "div",
            dragBetween: false,
            dragEnd: saveOrder,
            placeHolderTemplate: "<li class='placeHolder'><div></div></li>"
        });
        //to save the draged item into list
        function saveOrder() {
            var data = $("#demolist li").map(function () { return $(this).children().html(); }).get();
            //$("input[name=list1SortOrder]").val(data.join("|"));
        };
    </script>
    </form>
</body>
</html>

In the above code, you can see that I have script blog for making the list item dragable after the html list. If you use the script block on head of the page then it will not work.

Output-

Drag and Drop in list items
Drag and Drop in HTML list

No comments:

Post a Comment

If You Enjoyed This Post Please Take 5 Seconds To Share It.

^ Scroll to Top hgpromo