위로 이동하고 목록 상자의 항목 아래로 이동

Question

목록 상자에 asp.net mvc (C#) 응용 프로그램의 데이터베이스에서 항목이 채워져 있습니다.

목록 상자에서 항목을 위/아래로 이동하고 업데이트 된 순서로 데이터베이스에 다시 저장하는 옵션을 제공해야합니다.

jquery를 사용하여 목록 상자의 항목을 위로 이동/아래로 이동하는 것을 좋아합니다. 뭐하는 가장 좋은 방법/soultion 그것을 할까? 또는 listbox와 함께 사용하는 것 이외의 다른 방법으로 가장 좋은 방법이 있습니까?

Answer 1

저는 코드가 없지만 움직이는 div의 jQuery를 사용하는 웹에 몇 가지 예가 있습니다.

제 생각에는 목록 상자를 움직일 수있는 div 또는 무엇인가를 선호하는 것입니다.

Something like this might help you. 내가 생각하는 목록을 사용하고 순서를 바꿀 수 있습니다. 그런 다음 새 질의를 jQuery하여 데이터베이스에 저장할 수 있습니다.

Answer 2

당신은 같은 뭔가 항목의 클라이언트 측을 이동할 수 있습니다

  $("#btnMoveSectionUp").click(function (e) { 
      var curr = $("#<%= lstEditReportSections.ClientID %> option:selected"); 
      if (curr.length == 0) return; 
      if (curr.index() > 0) { 
       var prev = curr.prev(); 
       curr.insertBefore(prev); 
      } 
     }); 
      $("#btnMoveSectionDown").click(function (e) { 
      var curr = $("#<%= lstEditReportSections.ClientID %> option:selected"); 
      if (curr.length == 0) return; 
      if (curr.index() < $("#<%= lstEditReportSections.ClientID %> option").length - 1) { 
       var next = curr.next(); 
       curr.insertAfter(next); 
      } 
     }); 

그러나 서버는 클라이언트에 변경 사항이 표시되지 않습니다. 내가 한 것은이 코드를 사용하여 숨겨진 필드에 모든 값을 저장 한 다음 서버 측에서 분할하는 것입니다.

  $("#<%= btnSaveReport.ClientID %>").click(function (e) { 
      if (confirm("Are you sure you want to save the report?") != true) return false; 
      var sections = $("#<%= lstEditReportSections.ClientID %> option").map(function() { 
       return $(this).val(); 
      }).get().join('#'); 
      $("#<%= hidEditReportSectionsList.ClientID %>").val(sections); 
     }); 

그것은 이상적이지는 않지만 저를위한 속임수였습니다.