save client html changes

I have a div element that contains a ul element that starts off empty when the page is first loaded. The user can then drag li elements into this div box which w开发者_高级运维ill populate the ul element. I need to be able to retain the li elements that have been added to the ul container so that I can show the li elements after a post back. How can I achieve this?

<div class="sidebar-drop-box">              
                 <p class="dropTitle"><strong>Drop Box</strong><br />  
                     Drag and drop tracks here temporarily if you’re working with a long playlist.</p>  
                 <ul class="admin-song-list"></ul>  
         </div>

the drag and drop is done with javascript and jquery. All of this sits on a asp.net page. when the drag is completed this is code that is executed

function AddToDropBox(obj) {
    $(obj).children(".handle").animate({ width: "20px" }).children("strong").fadeOut();
    $(obj).children("span:not(.track,.play,.handle,:has(.btn-edit))").fadeOut('fast');
    $(obj).children(".play").css("margin-right", "8px");
    $(obj).css({ "opacity": "0.0", "width": "284px" }).animate({ opacity: "1.0" });
    if ($(".sidebar-drop-box ul").children(".admin-song").length > 0) {
        $(".dropTitle").fadeOut("fast");
        $(".sidebar-drop-box ul.admin-song-list").css("min-height", "0");
    }
    if (typeof SetLinks == 'function') {
        SetLinks();
    }

So i tried this code below to go through and get all the elements that are suppose to be in the drop down box and put them back. but it didnt add them to the drop box it made the changes to the master list

//repopulate drop box
    if(document.getElementById("ctl00_cphBody_hfRemoveMedia").value!="")
        {
            var localRemoveMedias=document.getElementById("ctl00_cphBody_hfRemoveMedia").value.split(",");
            $(".admin-left li.admin-song").each(function(){
//                alert("inEach");//WORKS
                for(x in localRemoveMedias)
                {
                    if($(this).attr("mediaid")==localRemoveMedias[x])
                    {
                        AddToDropBox($(this));
                    }
                }//end for
            });//function(){
        }

To retain your dragged elements across postback I suggest you to store your elements IDs in an asp:hiddenfield as your user do his drag/drop operations.

When postback will occur your IDs will be persisted and you will be able to recreate your page state as it was before postback.

For Drag and Drop operations, generally the post back is not required. You can do your server side updates using Ajax which will eliminate the creation of Page state altogether.

Apples and Oranges. Why are you posting back? I was doing the same thing when I started to use Ajax. I had a litle bit of nice Ajax functionality and whole lot of old school state driven viewstateenabled="true" good old .Net in one page. Is what we are being fed for the last 10 yrs. I was saving the state of the changes as I made them on the client and then I was manuvering on the server to maintain the changes between postbacks. I found that the less I used postbacks and the more I developed in a stateless state of mind. If you can avoid the post back make an Ajax call to the server and do what you have to do, return the results and redraw accordingly.