Drag and Drop

ASPX PAGE
-------------
use the script file
-----------------
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
    rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"
    type="text/javascript"></script>
**************************
apply style to div
-----------------
<style type="text/css">
    #divUsers
    {
        margin-top: 10px;
    }
    #divUsers input
    {
        float: left;
        margin-left: 10px;
    }
    #divAllUsers
    {
        float: left;
        width: 330px;
        height: 310px;
        border: groove gray;
    }
    #divTeamMembers
    {
        float: left;
        width: 330px; /* margin-left: 190px; */
        margin-left: 150px;
        height: 310px;
        border: groove gray;
    }
    #divUsers ul
    {
        list-style-type: none;
        padding: 0px;
    }
    #divUsers div
    {
        overflow-y: auto;
        overflow-x: hidden;
    }
    #divUsers ul li
    {
        padding: 5px;
        margin: 0px;
        width: 319px;
        border: 1px solid gray;
        cursor: move;
        z-index: 1000;
    }
    .draghover
    {
        background: #DEDEDE;
    }
</style>
************************************
use jquery functons
---------------------

<script type="text/javascript" language="javascript">
    $(document).ready(function () {
        GetAllList();

        $("#btnSave").click(function () {
            insertTest();
        });
    });


    function insertTest() {


        var userids = "[";
        var itemcount = 0;
        var textid=$("#txtID").val();
        $("#divTeamMembers li input:hidden").each(function () {
            userids += "{'userid':'" + $(this).val() + "'},";
            itemcount++;
        });
        if (itemcount == 0) {
            alert('Please select an item');
            return;
        }
       
        userids += "]";
        userids = userids.replace(",]", "]");
       
        $.ajax({
            type: "POST",
            url: "DragDropSample.aspx/InsertTest",
            data: "{'TextID':'" + textid + "','UserIds':" + userids + "}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function () {
                alert("Saved Successfully");
            }
        });
    }


    //to get all places
    function GetAllList() {

        $.ajax({
            type: "POST",
            url: "DragDropSample.aspx/GetAllSelList",
            dataType: "json",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            success: function (xmldata) {
                fillListItems(xmldata.d, 0);

            }

        });
    }
  

    function fillListItems(xmldata, userorteam) {

        if (userorteam) {
            $("#divTeamMembers ul").empty();
        }
        else {
            $("#divAllUsers ul").empty();
        }
        $(xmldata).find("row").each(function () {
            var listitem = document.createElement("li");
            var lblname = document.createElement("span");
            var txtid = document.createElement("input");
            txtid.type = "hidden";
            $(txtid).val($(this).find("column").eq(0).text());
            $(lblname).html($(this).find("column").eq(1).text());
            $(listitem).append(txtid);
            $(listitem).append(lblname);
            if (userorteam) {

                $("#divTeamMembers ul").append(listitem);
                $(listitem).addClass("privilegeduser");
            }
            else {

                $("#divAllUsers ul").append(listitem);
                $(listitem).addClass("user");

            }
            enableDragAndDrop();
        });
    }


    function enableDragAndDrop() {
        $("#divUsers li").draggable({
            containment: 'document',
            scroll: 'false',
            helper: 'clone',
            revert: 'invalid'
        });
        $("#divTeamMembers").droppable({
            hoverClass: "draghover",
            accept: '.user',
            drop: function (event, ui) {
                $("<li></li>").html(ui.draggable.html()).appendTo($(this).find("ul").eq(0)).addClass("privilegeduser").draggable({
                    containment: 'document',
                    scroll: 'false',
                    helper: 'clone',
                    revert: 'invalid'
                });
                ui.draggable.remove();


            }
        });

        $("#divAllUsers").droppable({
            hoverClass: "draghover",
            accept: '.privilegeduser',
            drop: function (event, ui) {
                $("<li></li>").html(ui.draggable.html()).appendTo($(this).find("ul").eq(0)).addClass("user").draggable({
                    containment: 'document',
                    scroll: 'false',
                    helper: 'clone',
                    revert: 'invalid'
                }); ;
                ui.draggable.remove();
            }
        });
    }

</script>

*************************************************
use design like
---------------
<input type="text" id="txtID"/>
    <br />
    <div id="divUsers">
        <div id="divAllUsers">
            <ul>
            </ul>
        </div>
        <div id="divTeamMembers">
            <ul>
            </ul>
        </div>
    </div>
    <input type="button" id="btnSave" value="Save"/>
**********************************************

ASPX.CS PAGE
-------------------

[WebMethod]
        public static void InsertTest(int TextID, object UserIds)
        {
            //string query = "";
            GridDL oGridDL = new GridDL();
            List<object> lstItems = new JavaScriptSerializer().ConvertToType<List<object>>(UserIds);
            ArrayList arrList = new ArrayList();
            foreach(IDictionary item in lstItems)
            {
                arrList.Add(item["userid"].ToString());
            }
            foreach (string id in arrList)
            {
               // query = "INSERT INTO TBL_DragDrop VALUES((SELECT MAX(ID) FROM TBL_DragDrop)+1,'" + id + "','" + TextID + "')";
                oGridDL.DataConnection("INSERT INTO TBL_DragDrop VALUES((SELECT MAX(ID) FROM TBL_DragDrop)+1,'" + id + "','" + TextID + "')", 1);
            }           
            //oGridDL.DataConnection(query,1);
        }

********