[javascript/jquery] javascript li move example / 자바스크립트 li 위아래로 이동시키는 방법

[javascript/jquery] javascript li move example / 자바스크립트 li 위아래로 이동시키는 방법

 

 

javascript 에서

 

li 리스트의 순서를 변경하고자 할때

 

여러가지 방법들 중에서

 

위 / 아래 버튼 클릭시 해당 요소의 위치를

 

하나 위로 혹은 하나 아래로 변경해야하는

 

경우가 있습니다.

 

그럴때는 아래 함수를 이용하시면 됩니다.

 

 

예를들어서

 

아래와 같이  ul 안에

 

3개의 li 가 있다고 가정하고,

<ul id="category">
    <li id="id_li_1" class="category-item ui-state-default">111</li>
    <li id="id_li_2" class="category-item ui-state-default">222</li>
    <li id="id_li_3" class="category-item ui-state-default">333</li>
</ul>

 

위 li 의 위치를 이동시킬 함수를

 

아래와 같이 만들어 줍니다.

 

function move_li(gbn, no){
    var $li = $("#id_li_"+no);
    if( gbn == "UP" ) {
        $li.prev().before($li);
    }else{
        $li.next().after($li);
    }
}

 

버튼클릭시 호출되는 함수는 

 

아래와 같이 파라미터를 입력하시면 됩니다.

 

move_li('UP','2')
move_li('DOWN','2')

 

위 내용 보시면 아시겠지만,

 

move_li 함수에 UP 과 2 를 입력하면,

2번 li 를 위로 하나 이동시킨다는 의미입니다.

 

반대로는 UP 대신에 DOWN 을 입력하시면 됩니다.

 

상황에 맞게 수정해서 사용하시면 됩니다!

 

참고들 하세요!