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

wonsama(71)

Published in

mini.topia

Words

Reading

1 min

Listen

Play

학습목표

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

결과물

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

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

소스코드

<!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>