웹 에서 드래그 정렬 과 자바 배경 상호작용 실현 방법 예시

업무 수요
1.백 스테이지 의 관리 인터페이스 에서 정렬 기능 을 통 해 정렬 인터페이스 에 직접 들어간다.
2,정렬 인터페이스 에서 정렬 해 야 할 제목 을 인공 적 으로 수 동 으로 드래그 하여 정렬 을 완료 한 후 제출
3.app 또는 전단 에 대응 하 는 정렬 이 이 루어 집 니 다.
본 고 는 웹 드래그 정렬 과 자바 배경 상호작용 에 관 한 내용 을 상세 하 게 소개 할 것 입 니 다.다음은 더 이상 말 하지 않 겠 습 니 다.상세 한 소 개 를 살 펴 보 겠 습 니 다.
페이지 전시
전체 페이지 효 과 를 보 여 준 후 그림 과 같이(페이지 클릭 확인 후 효 과 는 자바 배경 과 상호작용 합 니 다):

3.디자인 사고:
배경:정렬 된 결 과 를 데이터베이스 에 저장 하려 면 데이터베이스 에 대응 하 는 최소한 의 필드(정렬 된 번호 sort)를 수정 해 야 합 니 다.배경 에 최소한 받 아야 할 인 자 는 sort 와 id 두 필드 입 니 다.제 가 사용 하 는 것 은 이 두 필드 를 대상 에 밀봉 하고 집합 방식 으로 배경 에 전달 하 는 것 입 니 다.해당 하 는 수정 은 데이터 베이스 에서 정렬 해 야 할 모든 데 이 터 를 대상 으로 해 야 하기 때 문 입 니 다.물론 서로 다른 업무 에 따라 서로 다른 정렬 방식 을 실시 할 수 있다.
전단:a,드래그 기능 실현;b.실시 간 시리 얼 번호 sort 와 이 시리 얼 번호 가 지정 한 id 를 제공 해 야 합 니 다.
4.전단 디자인:
1.플러그 인 다운로드:하이퍼링크 를 클릭 하고 다운로드drag.zip압축 을 풀 면 자동 으로 drag.js 파일 로 전 환 됩 니 다.참조 하면 됩 니 다.
2,코드 구현:
A>페이지 의 코드:

<!--     -->
 <div class="listMain">
  <div class="addData">
  <ul class="dataList" id="dataList${var.ID }">
  <c:forEach items="${varList }" var="movieParam" varStatus="varSatus"> 
  <li class="dataList_Child">
   <input type="hidden" class="idSort" value="${movieParam.id }" /> <!--id -->
   <p class="datali_name">${movieParam.NAME }</p> <!--    9999,888,555,333  -->
   <input type="hidden" class="seqSort" /> <!--  sort      -->
　　　　　　　　　　　　　　　　　　　</li>
  </c:forEach>
  </ul>
  <input type="button" name="" value=" &nbsp;&nbsp; " class="Add_listButton" onclick="addList()">
  <input type="button" name="" value=" &nbsp;&nbsp; " class="M_sort" onclick="getSortList()" >
  </div> 
　　　　　　　　</div>

<!--    -->
　　　　　　　　<div class="M_sortMain">
　　　　　　　　　　<form action="movieparam/editSort.do" method="post">
  　　<div class="M_sortMain_wrap">
  　　<span class="close_M_sortMain"></span>
   <div class="sortOul">
   <ul class="sortOulMain"></ul>
   </div>
  　　</div>
  　　<input type="submit" value="  " class="sort_submit">
　　　　　　　　　　</form>
　　　　　　　　</div>

B>정렬 을 누 르 면 이벤트 가 발생 합 니 다(현재 번호 와 id 값 을 가 져 올 수 있어 야 합 니 다).

//    :1,          div;2,         input   name  ,      ;3, sort    input  sort   
　　　　　　function getSortList(){
　　　　　　　 $(".M_sortMain").css("display","block"); //      
  $(".sortOulMain").html($(".listMain").html()); //          div
  $("li").each(function(){
   var seq_attr = 'movieParams['+$(this).index()+'].sort';
   var id_attr = 'movieParams['+$(this).index()+'].id';
   $(this).children(".seqSort").attr('name',seq_attr); //      name  
   $(this).children(".seqSort").val($(this).index()) // sort    input  sort   
   $(this).children(".idSort").attr('name',id_attr); // id   name  
  })
　　　　　　　}

C>드래그 효과 구현,제 공 된 drag.js 참조

//           
  $('.sortOulMain').DDSort({
  target: 'li',
  floatStyle: {
   'border': '1px solid #ccc',
   'background-color': '#fff',
   'cursor': 'move'
  },
  //               
  up: function () {
  $("li").each(function(){
   $(this).children(".seqSort").val($(this).index()); //     sort   input    
   })
  }
　　　　　　});

5.백 스테이지 디자인:
백 스테이지 에서 사용 하 는 것 은 전통 적 인 SSM 프레임 워 크 입 니 다.주로 받 은 매개 변수 에 대한 처리 입 니 다.
A>SpringMVC 에 서 는 매개 변수의 수신 에 대해 지 정 된 name 에 따라 대응 해 야 한 다 는 것 만 주의 하면 됩 니 다.(여기 list 집합 에 있 는 매개 변수의 패 키 징 은 더 이상 강조 하지 않 습 니 다)

　　@RequestMapping("editSeq")
　　public ModelAndView editSeq(MovieParamListForm movieParamList)throws Exception{  
　　　　//         
　　　　movieParamService.editSeq(movieParamList.getMovieParams());
　　}

B>Service 층 의 처 리 는 생략 되 었 습 니 다.주로 movieParam 의 id 와 sort 두 필드 에 대한 작업 입 니 다.Mybatis 로 바로 이동 합 니 다.

<update id="editSeq" parameterType="java.util.List"> 
 <foreach collection="list" item="var" index="index" open="" close="" separator=";"> 
  update t_params 
  <set> 
  　　sort= #{var.sort}
  </set> 
  where id= #{var.id} 
 </foreach> 
　　</update>

C>이때 자신의 SQL 에 문제 가 없 음 을 발 견 했 지만 실행 할 때 컨트롤 러 가 잘못 되 었 다 면 데이터 베 이 스 를 연결 할 때 이 코드 를 추가 해 야 합 니 다.allow MultiQueries=true 이것 은 데이터 베 이 스 를 대량으로 수정 할 때 데이터 베 이 스 를 조작 하 는 문제 입 니 다.
총결산
이상 은 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 참고 학습 가치 가 있 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 셔 서 저희 에 대한 지지 에 감 사 드 립 니 다.