학습목표
항목을 선택을 통해 목록을 고정 / 재정렬 할 수 있도록 한다.
결과물
클릭한 대상이 고정형을 제외하고 맨 위로 올라가게 된다. 단 처음 정렬 순서는 유지한다. 필요에 따라 연산 수치를 변동 시켜 유연하게 해당 값 또한 바꿔 줄 수 있다.
[그림] 선택을 통해 재 정렬 처리
소스코드
<!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 (정렬) 를 통해 원하는 항목으로 재 정렬 해주는 것이 키 포인트라 생각한다.