라이브러리

sortable

현재 버전: 1.13.0 https://jqueryui.com/sortable/
Item1
Item2
Item3
Item4
Item5

Box1
Box2
Box3
Box4
Box5

html

<div class="js-sortable">
	<div>Item1</div>
	<div>Item2</div>
	<div>Item3</div>
	<div>Item4</div>
	<div>Item5</div>						
</div>
<div class="js-sortable">
	<div>Box1</div>
	<div>Box2</div>
	<div>Box3</div>
	<div>Box4</div>
	<div>Box5</div>		
</div>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>

script

$(function() {
	$(".js-sortable").each(function(i,e) {
		$(this).sortable({
			axis: "y", // 드래그 이동 방향 설정 (x, y)
			classes : { // class 설정
				"ui-sortable" : "sortable-list" 
			},
			containment: "document", // 드래그 제한 영역 설정 (parent, document, window)
			cursor: "move", // 드래그할 때 커서 형태
			disabled: false, // 드래그 사용 여부 설정
			connectWith: ".js-sortable", // 드래그 이동 가능한 영역 설정
			dropOnEmpty: true // connectWith 설정했을 경우 false: 빈영역이면 return 처리 / true: 이동 가능
		});	
	});
	
	/*
	$(".js-sortable").sortable("cancel"); // 드래그 이전 상태로 되돌리기
	$(".js-sortable").sortable("destory"); // 드래그 기능 삭제
	$(".js-sortable").sortable("disable"); // 드래그 비활성화 설정
	$(".js-sortable").sortable("enable"); // 드래그 활성화 설정
	$(".js-sortable").sortable("refresh"); // 새로고침
	
	// 드래그 시작할 때 이벤트
	$(".js-sortable").on("sortstart", function(event, ui) {
		console.log("start")
	});
	
	// 드래그 끝날 때 이벤트
	$(".js-sortable").on("sortstop", function(event, ui) {
		console.log("end");
	});
	
	// 순서, 위치가 변경됐을 때 이벤트
	$(".js-sortable").on("sortchange", function(event, ui) {
		console.log("change");
	});
	
	// 드래그 멈추기 전 이벤트
	$(".js-sortable").on("sortbeforestop", function(event, ui) {
		console.log("before stop");
	});
	*/
});