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将被保留，并且您将能够重新创建页面状态，就像回发前一样。

Answer 2

对于拖放操作，通常不需要回发。您可以使用Ajax进行服务器端更新，这将完全消除页面状态的创建。

Answer 3

苹果和橘子。你为什么回帖？当我开始使用Ajax时，我正在做同样的事情。我有一个很好的Ajax功能和很多旧学校状态驱动viewstateenabled =“真正的”旧的.Net在一个页面。是我们在过去10年里吃饱了。当我在客户端上创建它们时，我正在保存更改的状态，然后我在服务器上进行操作以维护回发之间的更改。我发现使用回发的次数越少，我在无状态下的发展就越多。如果您可以避免回发对服务器进行Ajax调用并执行您必须执行的操作，请返回结果并相应地重新绘制。

保存客户端html更改

3 个答案: