> 웹 프론트엔드 > JS 튜토리얼 > jquery는 레이블 이동 위, 아래 및 top_jquery를 구현합니다.

jquery는 레이블 이동 위, 아래 및 top_jquery를 구현합니다.

WBOY
풀어 주다: 2016-05-16 16:02:08
원래의
1481명이 탐색했습니다.

예: 예를 들어 백그라운드의 태그 목록에서 위로 이동, 아래로 이동, 상단에 붙이기 기능이 구현됩니다

주요 구현 아이디어는 노드 작업입니다. 예를 들어 위로 이동, 클릭한 항목을 이전 노드로 직접 이동 등입니다. 물론 실제 코드 구현에서는 현재 클릭했는지 여부와 같은 몇 가지 판단을 추가해야 합니다. 작업 항목이 이미 하단이거나 하단으로 설정되어 있는 경우 해당 프롬프트가 표시되어 운영자에게 무슨 일이 일어났는지 알려줍니다.

사물:

1. 먼저 사용한 복제 방법.clone(true):

즉, 나중에 사용할 수 있도록 현재 이동할 항목을 저장하는 것입니다.

2. 현재 태그에 해당하는 관련 요소와 관련 메소드를 찾습니다.

예: 현재 요소의 .prev() 태그

현재 요소 아래의 .next() 태그

.after()xxx 뒤에 메소드 추가

.before() xxx 앞에 메소드 추가

.prepend 추가 방법

3. 구현

구체적인 코드는 다음과 같습니다.

var productsLabel = { 
  //设置置顶 
  setHot: function(t){ 
    var bar = 'showAndHide_box'; 
    var obj = $(t).parents('.'+bar).clone(true); 
    $(t).parents('.'+bar).remove(); 
    $(".showAndHide_list_box").prepend(obj); 
  },

  //设置上移 
  setUp: function(t){ 
    var bar = 'showAndHide_box'; 
    if($(t).parents('.'+ bar).prev('.'+bar).html() != undefined){ 
      var obj = $(t).parents('.'+bar).clone(true); 
      $(t).parents('.'+bar).prev().before(obj); 
      $(t).parents('.'+bar).remove(); 
    }else{ 
      alert('亲,现在已是最上的哦,不能再上移了...'); 
    } 
  },

  //设置下移 
  setDown: function(t){ 
    var bar = 'showAndHide_box'; 
    if($(t).parents('.'+bar).next('.'+bar).html() != undefined){ 
      var obj = $(t).parents('.'+bar).clone(true); 
      $(t).parents('.'+bar).next().after(obj); 
      $(t).parents('.'+bar).remove(); 
    }else{ 
      alert('亲,现在已是最下的哦,不能再下移了...'); 
    } 
  } 
}

로그인 후 복사

위 내용은 이 글에서 공유한 모든 내용입니다. 마음에 드셨으면 좋겠습니다.

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿