save client html changes

Question

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 will 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(){
        }

Answer 1

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.