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" "">

<html xmlns="">
<head runat="server">
    <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">
            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;
    <form id="form1" runat="server">
    <ul id="demolist">
    <script type="text/javascript">
        //to make the list dragable
            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();

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.


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