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

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

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

사물:

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('亲，现在已是最下的哦，不能再下移了...'); 
    } 
  } 
}

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