2010-12-20 6 views
6

페이지가 처음로드 될 때 비어있는 채로 시작되는 ul 요소가 포함 된 div 요소가 있습니다. 그런 다음 li 요소를이 div 상자로 드래그하여 ul 요소를 채 웁니다. 나는 뒤 컨테이너 뒤에 li 요소를 표시 할 수 있도록 컨테이너에 추가 된 li 요소를 보유 할 수 있어야합니다. 이것을 어떻게 할 수 있습니까?클라이언트 HTML 변경 저장

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

그래서 내가 통과하고 드롭 다운 상자에서하고 다시 넣어 생각하는 모든 요소를 ​​얻기 위해 아래의 코드를 시도 실행되는 코드입니다. 하지만 그것은 내가 당신이 ASP에서 요소 ID를 저장하는 것이 좋습니다

//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(){ 
     } 
+3

특히 드래그/드롭 작업을 수행하는 데 사용하는 프레임 워크와 같은 정보를 더 제공 할 수 있습니다. 이 도구들 모두는 당신이 원하는 것을 성취 할 수있는 다른 방법을 가지고 있습니다. – NotMe

+3

상태를 저장하기 위해 클라이언트 측에서 삭제가 완료되면 서버에 AJAX 요청을하지 않으므로 원하는 작업을 수행 할 수 있습니까? 나는 혼란 스러울지도 모른다. 나는 포스트 백이 서버에 대한 업데이트를 만들고 있는지 확신하지 못했습니다 ... – gbvb

+0

컨트롤의'.innerHtml' 속성을 문자열로 서버에 보내려고 했습니까? 어쩌면 컨트롤에'runat = server'를 설정해도 전체 페이지를 제출할 때 자동으로 업데이트 된 컨텐츠를 얻을 수 있습니다. – BertuPG

답변

1

다시 게시 전체에서 드래그 요소를 유지하려면 마스터 목록에 변경 한 드롭 박스에 추가 didnt가 : 사용자로에 HiddenField 그의 드래그 할/드롭 작업.

포스트 백이 발생하면 ID가 지속되고 다시 게시하기 전의 페이지 상태를 다시 만들 수 있습니다.

0

드래그 앤 드롭 작업의 경우 일반적으로 포스트 백이 필요하지 않습니다. Ajax를 사용하여 서버 측 업데이트를 수행하면 페이지 상태 생성을 완전히 제거 할 수 있습니다.

0

사과와 오렌지. 왜 다시 올리는거야? Ajax를 사용하기 시작할 때도 똑같은 일을했습니다. 나는 멋진 Ajax 기능을 가지고 있었고 오래된 학교 상태가 viewstateenabled = "true"good old .Net을 한 페이지에 몰아 넣었습니다. 지난 10 년 동안 우리에게 먹이를주고있는 것입니다. 나는 클라이언트에서 변경된 상태를 저장하면서 포스트 백 간의 변경 사항을 유지하기 위해 서버를 조작하고있었습니다. 나는 포스트 백을 덜 사용함과 동시에 무국적 상태의 마음으로 개발했다는 ​​것을 알게되었습니다. 포스트 백을 피할 수 있다면 서버에 Ajax 호출을하고 수행해야 할 작업을 수행하고 결과를 반환하고 그에 따라 다시 그리십시오.