[개발] 선택을 통한 UL/LI 목록 재 정렬 with jquery

wonsama

Published: 27 Apr 2020 › Updated: 27 Apr 2020 [개발] 선택을 통한 UL/LI 목록 재 정렬 with jquery

[개발] 선택을 통한 UL/LI 목록 재 정렬 with jquery

학습목표

항목을 선택을 통해 목록을 고정 / 재정렬 할 수 있도록 한다.

결과물

클릭한 대상이 고정형을 제외하고 맨 위로 올라가게 된다. 단 처음 정렬 순서는 유지한다. 필요에 따라 연산 수치를 변동 시켜 유연하게 해당 값 또한 바꿔 줄 수 있다.

[그림] 선택을 통해 재 정렬 처리

소스코드

<!DOCTYPE html>
<html>
<head>
    <title>REORDER LIST ELEMENTS with jquery</title>
    <script type="text/javascript" src="./jquery-1.12.4.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body{

        }
        ul {
            list-style-type: none;
            background-color: black;
            color: white;
        }
        li.selected::before {
            color: yellow;
            content: "★";
        }
        li.data-fixed::before {
            color: red;
            content: "♥";
        }
    </style>
</head>
<body>
    <ul id="t1">
        <li data-base="99999" data-point="0" class="data-fixed">00번 고정형</li>
        <li data-base="10" data-point="0">01번 아이템</li>
        <li data-base="9" data-point="0">02번 아이템</li>
        <li data-base="8" data-point="0">03번 아이템</li>
        <li data-base="7" data-point="0">04번 아이템</li>
        <li data-base="6" data-point="0">05번 아이템</li>
        <li data-base="5" data-point="0">06번 아이템</li>
        <li data-base="4" data-point="0">07번 아이템</li>
        <li data-base="3" data-point="0">08번 아이템</li>
        <li data-base="2" data-point="0">09번 아이템</li>
        <li data-base="1" data-point="0">10번 아이템</li>
    </ul>

<script type="text/javascript">

    var SELECTED_POINT = 100;

    // 대상 UL 의 목록 정보를 재정렬
    function reorder_list(target){
        var children = target.children("li");

        // 목록 정보를 분리 후 정렬
        children.detach().sort(function(v1,v2){
            
            let _v1 = $(v1).data("base") + $(v1).data("point");
            let _v2 = $(v2).data("base") + $(v2).data("point");

            return _v2 - _v1;
        });

        target.append(children);
    }

    // li 클릭 시 즐겨 찾기 정보를 toggle 처리
    $("li").click(function(){

        // 고정형 대상은 변경 처리를 안함 (단 base 의 값을 매우 큰 수로 셋팅)
        if($(this).hasClass("data-fixed")){
            return;
        }

        // 즐겨찾기 선택 값을 토글 처리
        $(this).data("point", $(this).data("point")==0?SELECTED_POINT:0 );
        if($(this).data("point")==SELECTED_POINT){
            $(this).addClass("selected");
        }else{
            $(this).removeClass("selected");
        }

        // 대상 UL 의 목록 정보를 재정렬       
        reorder_list($(this).parent()) ;
        
    });

    


</script>
</body>
</html>

맺음말

UL 항목을 detach (때어낸 ) 이후 sort (정렬) 를 통해 원하는 항목으로 재 정렬 해주는 것이 키 포인트라 생각한다.

Leave [개발] 선택을 통한 UL/LI 목록 재 정렬 with jquery to:

Written by wonsama

개발자 - flutter, nodejs, java, 금융권

Best Posts From wonsama

We have not curated any of wonsama's posts yet. But you can encourage our curation team to review posts by visiting them regularly and by referring other readers. Because we give priority to frequently read content.

[개발] 선택을 통한 UL/LI 목록 재 정렬 with jquery