js 드래그 앤 드롭(drag&drop) 사용하기

drag&drop

개요

안녕하세요 빈코입니다! 오늘은 js에서 순서를 변경하는 기능인 drag&drop 기능에 대해 포스팅하려고 합니다. 드래그 앤 드롭은 파일을 마우스로 옮기거나 특정 요소들을 원하는 순서로 배치하기 위해 많이 사용하는데, 오늘은 체크박스들의 위치들을 옮기는 작업들을 같이 해보려고 합니다. 자세한 내용들은 하단에서 설명할게요😃

 

드래그 앤 드롭 예시📙

먼저 드래그 앤 드롭의 예시 먼저 살펴볼까요?

 

drag&drop 예시

 

5개의 과일을 각각 체크박스로 명시한 후 위의 영상과 같이 순서를 변경하는 간단한 예시를 들어봤습니다. 실무에서는 사용자 인터페이스에서 정렬 기능을 제공해야 할 때 주로 해당 기능을 사용하는데, 예를 들어 대시보드나 위젯을 사용자가 원하는 레이아웃으로 변경하는 기능을 제공한다던가 혹은, 데이터 테이블의 칼럼을 사용자가 원하는 대로 재배치하는 기능에도 drag&drop이 사용됩니다.

 

하단에서 사용하는 방법과 위 과일 체크박스들을 움직인 로직들을 설명할게요😁

 

기능 구현 전 작업📘

js의 drag&drop 기능은 jQuery UI Sortable을 사용해야 하기 때문에, 필수 임포트 코드는 기본적으로 jQuery와 jQuery UI 라이브러리가 필요합니다.

<!-- jQuery 라이브러리 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- jQuery UI 라이브러리 -->
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

<!-- jQuery UI CSS -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">

 

예제 소스📒

// HTML
<div id="fruit-sortable">
    <span class="sortable" id="apple">
        <input type="checkbox" id="in_apple">
        <label for="in_apple""><span class="cursor">사과</span></label>
    </span>
    <span class="sortable" id="banana">
        <input type="checkbox" id="in_banana">
        <label for="in_banana"><span class="cursor">바나나</span></label>
    </span>
    <span class="sortable" id="mango">
        <input type="checkbox" id="in_mango">
        <label for="in_mango"><span class="cursor">망고</span></label>
    </span>
    <span class="sortable" id="kiwi">
        <input type="checkbox" id="in_kiwi">
        <label for="in_kiwi"><span class="cursor">키위</span></label>
    </span>
    <span class="sortable" id="strawberry">
        <input type="checkbox" id="in_strawberry">
        <label for="strawberry"><span class="cursor">딸기</span></label>
    </span>
</div>

 

HTML은 간단한 예시이기 때문에 코드 설명은 생략할게요😊

 

// js
var fruitOrder = {'apple', 'banana', 'mango', 'kiwi', 'strawberry'}; // 과일 순서
$('#fruit-sortable').sortable(sort("fruit-sortable",fruitOrder));

 

js 단에서는 처음에 fruitOrder라는 변수를 선언하고, 해당 변수에 임의로 과일 순서를 배치하였습니다. 만약에 실무일 경우에는 위처럼 정렬 순서를 정의하지 않고, 이전에 저장했거나 혹은 초기 순서로 지정한 순서 값을 DB에서 가져올 것입니다.

 

이후에, 해당 정렬값을 이용하여 'fruit-sortable'이라는 id를 찾아서 정렬을 진행합니다.

 

$('#fruit-sortable').sortable({
    cursor: "move",       // 마우스 커서를 움직이는 동안 'move' 스타일로 변경
    opacity: 0.5,         // 드래그 중인 요소의 투명도를 50%로 설정
    create: function (event, ui) {
        sort("fruit-sortable", fruit_order); // 생성 시 특정 작업 수행
    },
    update: function (event, ui) {
        fruit_order = $('#fruit-sortable').sortable("toArray", {attribute: 'id'});
        // 정렬 순서가 업데이트되면 현재 순서를 가져와 fruit_order 배열에 저장
    }
});

 

만약 사용자가 과일 체크박스를 드래그하여 움직일 경우에는 정렬 순서가 변경됨과 동시에 이전에 선언한 fruit_order라는 변수에 toArray 메서드를 이용하여 순서에 맞게 저장됩니다.

 

추가적으로 개발할 때 일부 항목은 드래그가 불가능하게 만들 수 있습니다. 

// HTML
<span class="sortable undraggable">
    <input type="checkbox" id="fixed_item">
    <label for="fixed_item"><span class="cursor">고정된 항목<span></label>
</span>

 

// js
$('#fruit-sortable').sortable({
    cancel: ".undraggable", // 클래스가 "undraggable"인 요소는 드래그 불가
});

 

마지막으로 기본 드래그 스타일은 CSS로 커스터마이즈가 가능합니다.

/* 드래그 중인 요소의 스타일 */
.ui-sortable-helper {
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 5px;
}

 

보다 다양한 기능들은 jQuery UI 공식 문서를 확인해주세요😁

 

마치며

js 드래그 앤 드롭은 생각보다 간단하게 구현이 됩니다. 위에서 언급한 바와 같이 jQuery UI의 공식 문서를 확인해 보면 정렬하는 기능만 약 50가지의 기능들을 제공하기 때문에, 입맛에 맞게 기능들을 가져다 사용하면 될 것 같네요 :)