728x90
반응형
위로 아래로 버튼으로 항목을 올리고 내리는 예제를 만들어 보겠습니다.
closest 메소드를 사용하여 현재 이동 버튼에 가장 가까운 <li> 요소를 찾은 후, previousElementSibling 또는 nextElementSibling 속성을 사용하여 이전 또는 다음 요소를 찾아서 현재 요소와 위치를 바꿉니다.
이렇게 구현된 리스트 위아래 이동 기능은 사용자가 원하는 순서대로 리스트를 정렬하는 데 유용하게 사용될 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>리스트 올리기 내리기</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<style>
.list-group .bg-success {
background-color: #c3e6cb;
}
.list-group .bg-warning {
background-color: #ffeeba;
}
</style>
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-md-6">
<h3>리스트</h3>
<ul class="list-group" id="myList">
<li class="list-group-item">
<span>항목 1</span>
<div class="btn-group float-right">
<button type="button" class="btn btn-secondary btn-sm move-up" onclick="moveUp(this)">위로</button>
<button type="button" class="btn btn-secondary btn-sm move-down" onclick="moveDown(this)">아래로</button>
</div>
</li>
<li class="list-group-item">
<span>항목 2</span>
<div class="btn-group float-right">
<button type="button" class="btn btn-secondary btn-sm move-up" onclick="moveUp(this)">위로</button>
<button type="button" class="btn btn-secondary btn-sm move-down" onclick="moveDown(this)">아래로</button>
</div>
</li>
<li class="list-group-item">
<span>항목 3</span>
<div class="btn-group float-right">
<button type="button" class="btn btn-secondary btn-sm move-up" onclick="moveUp(this)">위로</button>
<button type="button" class="btn btn-secondary btn-sm move-down" onclick="moveDown(this)">아래로</button>
</div>
</li>
<li class="list-group-item">
<span>항목 4</span>
<div class="btn-group float-right">
<button type="button" class="btn btn-secondary btn-sm move-up" onclick="moveUp(this)">위로</button>
<button type="button" class="btn btn-secondary btn-sm move-down" onclick="moveDown(this)">아래로</button>
</div>
</li>
<li class="list-group-item">
<span>항목 5</span>
<div class="btn-group float-right">
<button type="button" class="btn btn-secondary btn-sm move-up" onclick="moveUp(this)">위로</button>
<button type="button" class="btn btn-secondary btn-sm move-down" onclick="moveDown(this)">아래로</button>
</div>
</li>
</ul>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script>
function moveUp(btn) {
var listItem = btn.closest("li");
var prevListItem = listItem.previousElementSibling;
if (prevListItem) {
listItem.parentNode.insertBefore(listItem, prevListItem);
}
}
function moveDown(btn) {
var listItem = btn.closest("li");
var nextListItem = listItem.nextElementSibling;
if (nextListItem) {
listItem.parentNode.insertBefore(nextListItem, listItem);
}
}
</script>
</body>
</html>
728x90
반응형
'프로그래밍 > jquery' 카테고리의 다른 글
| GeolocationPositionError {code: 1, message: 'User denied Geolocation'} 오류 해결 방법 (0) | 2024.06.07 |
|---|---|
| 모바일웹에서 지도 좌표 알아 내는 법 (0) | 2023.04.19 |
| CKEditor5에서 textarea 값을 가져오는 방법 (0) | 2023.04.15 |
| input selectbox radio checkbox 각요소별 접근 방법 (0) | 2023.04.14 |
| CKEditor4에서 textarea 값을 가져오는 방법 (0) | 2023.04.13 |
