프로그래밍/jquery

리스트 올리기 내리기 버튼 만들기 (HTML, JavaScript, Bootstrap)

마루의 일상 2023. 4. 23. 02:41
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
반응형