保存客户端html更改

Question

我有一个div元素,其中包含一个ul元素,该元素在首次加载页面时从空开始.然后,用户可以将li元素拖到此div框中,该div框将填充ul元素.我需要能够保留已添加到ul容器中的li元素,以便我可以在回发后显示li元素.我怎样才能做到这一点？

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

使用javascript和jquery完成拖放操作.所有这些都在asp.net页面上.拖动完成后,这是执行的代码

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();
    }

所以我尝试下面的代码来完成并获取所有假设在下拉框中的元素并将它们放回去.但它没有将它们添加到下拉框中,它对主列表进行了更改

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

为了在回发过程中保留拖动的元素，我建议您在用户执行拖/放操作时将元素 ID 存储在 asp:hiddenfield 中。

当回发发生时，您的 ID 将被保留，并且您将能够重新创建回发前的页面状态。