[jQuery] UI Sortable 사용하기 (드래그 앤 드롭, 순서변경, 리스트 이동 정렬)

아래 소스 코드는 jQuery UI Sortable 라이브러리를 활용해서 리스트 간 아이템 이동과 이동이 발생할 때 update 이벤트를 활용하여 콘솔로 확인하는 예제입니다.

 

소스코드

ㅇ $(".sortable-list ul").sortable({ ... });
- .sortable-list 클래스를 가진 요소의 내부에 있는 ul 태그를 대상으로 Sortable을 설정합니다. 리스트 아이템들에 드래그 앤 드롭 기능을 추가하는 역할을 합니다.

ㅇ connectWith: ".sortable-list ul"
- 위의 옵션은 서로 다른 리스트 간에 아이템을 이동할 수 있도록 합니다. .sortable-list ul로 설정함으로써 같은 클래스를 가진 다른 리스트와 연결될 수 있습니다.

ㅇ start: function(event, ui) { ... }, stop: function(event, ui) { ... },
- 이 부분은 드래그 앤 드롭 작업의 시작과 종료 시에 실행되는 함수를 정의합니다. start 함수는 아이템을 드래그하기 시작할 때, stop 함수는 드롭을 끝낼 때 실행됩니다.

ㅇ update: function(event, ui) { ... }
- 아이템의 순서가 변경되거나 다른 리스트로 이동할 때 실행되는 함수입니다. ui.item.attr("id");로 이동한 아이템의 id를 가져옵니다. ui.item.parent().parent().attr("id");로 이동한 아이템의 부모 리스트의 id를 가져옵니다.

ㅇ disableSelection();
- disableSelection() 함수를 통해 텍스트 선택을 비활성화하여, 아이템을 드래그할 때 선택 효과가 발생하지 않도록 합니다.

 

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
	.sortable-list {
	  list-style-type: none;
	  padding: 0;
	  width: 150px;
	  float: left;
	  margin: 10px;
	  border: 1px solid #ccc;
	  background-color: #f0f0f0;
	}
	.sortable-list li {
	  background-color: #fff;
	  margin: 5px;
	  padding: 5px;
	  cursor: pointer;
	}
</style>
<div class="sortable-list" id="list1">
<h3>리스트 1</h3>
<ul>
	<li id="item1">아이템 1</li>
	<li id="item2">아이템 2</li>
	<li id="item3">아이템 3</li>
</ul>
</div>
<div class="sortable-list" id="list2">
<h3>리스트 2</h3>
<ul>
	<li id="item4">아이템 4</li>
	<li id="item5">아이템 5</li>
	<li id="item6">아이템 6</li>
</ul>
</div>
<script>
$(function() {
	$(".sortable-list ul").sortable({
		connectWith: ".sortable-list ul",
		start: function(event, ui) {
		  ui.item.addClass("dragging");
		},
		stop: function(event, ui) {
		  ui.item.removeClass("dragging");
		},
		update: function(event, ui) {
		  var movedItem = ui.item.attr("id");
		  var destinationList = ui.item.parent().parent().attr("id");
		  
		  console.log("아이템 이동:", movedItem);
		  console.log("이동된 리스트:", destinationList);
		  
		  var list1Items = $("#list1 ul li").map(function() {
			return $(this).attr("id");
		  }).get();
		  
		  var list2Items = $("#list2 ul li").map(function() {
			return $(this).attr("id");
		  }).get();
		  
		  console.log("전체 리스트1:", list1Items);
		  console.log("전체 리스트2:", list2Items);
		}
	}).disableSelection();
});
</script>

 

이벤트 전 화면

 

Sortable 이후 화면

 

 

console 화면