Drag And Drop 정렬 변경

드래그 앤 드롭으로 정렬 순서를 변경한다.

여기서는 vuejs에서 사용했지만 사용법은 일반 script와 같다.

 

1. CDN 추가

<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>

 

2. 테이블 생성 : tbody를 잡을 방법 하나와 idx값(Query에서 필요한 값) 필요

<table class="table table-dark">
	<thead>
		<tr>
			<th>정렬순서</th>
			<th>메뉴코드</th>
			<th>메뉴명</th>
			<th>NEW아이콘 사용여부</th>
			<th>사용여부</th>
			<th>IDX</th>
		</tr>
	</thead>
	<tbody id="sorting_row">
		<tr v-for="item in gnb_menu" :key="item.idx" :data-idx="item.idx">
			<td>{{item.sortingNumber}}</td>
			<td>{{item.menuCode}}</td>
			<td>{{item.menuName}}</td>
			<td>{{item.usingNewIcon == true ? '사용' : '사용안함'}}</td>
			<td>{{item.isUsing == true ? '사용' : '사용안함'}}</td>
			<td>{{item.idx}}</td>
		</tr>
	</tbody>
</table>

 

3. tbody의 변경을 감지할 script 생성

 변경과 동시에 저장을 하려면 여기에 추가. 여기서는 저장버튼을 따로 놔서 따로 function을 생성

, mounted() {
    $("#sorting_row").sortable({
		delay: 150
		, stop: function() {
			let sortedArrVar = new Array();

			$('#sorting_row > tr').each(function() {
				sortedArrVar.push($(this).attr("data-idx"));
			});
			_this.sorted_arr = sortedArrVar;

			console.log("_this.sorted_arr", _this.sorted_arr);
		}
	});
}
, method(){
    update_sort(){
        const formData = new FormData();
        formData.append("sortIdx", this.sorted_arr);

        callApiFromFormData("put", "/mobile-site/gnb-menu/list", formData, function (data) {
            alert("저장 완료");
        });
    }
}