라이브러리
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");
});
*/
});