![[jQuery] 테이블 행 Drag & Drop으로 이동시키기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fw0ZnN%2FbtsmrXVayVf%2FV0SF2ddFqhhOhUFSEEICK0%2Fimg.jpg)
728x90
웹 사이트 개발중 표의 행( table의 tr )의 위치를 사용자가 직접 변경하여 순서를 바꿔주어야 하는 경우가 발생한다.
jQuery-UI에서 지원하는 Sortable( https://jqueryui.com/sortable/ )을 이용하여 간단하게 해당 작업을 수 행 할 수 있다.
생성한 HTML Table에 마우스를 이용한 드래그 & 드랍으로 각 행( Row )의 위치를 변경해 보자
# 소스코드
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
table, th, td { border:1px solid #000000;width:650px;border-collapse:collapse;padding:5px;text-align:center; }
.selected { background-color:#FFFFDF; }
</style>
<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.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("table > tbody").sortable({
start : function(event, ui) {
ui.item.addClass("selected");
}
, stop : function(event, ui) {
ui.item.removeClass("selected");
}
});
});
</script>
</head>
<body>
<h3>■ jQuery 테이블 Row 선택하여 Drag & Drop 하기</h3>
<br/>
<table>
<thead>
<tr>
<th>작품명</th>
<th>회차</th>
<th>누적 시청 시간</th>
</tr>
</thead>
<tbody>
<tr>
<td>오징어 게임</td>
<td>9회</td>
<td>2,289,500,000시간</td>
</tr>
<tr>
<td>지금 우리 학교는 시즌1</td>
<td>12회</td>
<td>659,510,000시간</td>
</tr>
<tr>
<td>더 글로리</td>
<td>16회</td>
<td>560,990,000시간</td>
</tr>
<tr>
<td>마이 네임</td>
<td>8회</td>
<td>194,140,000시간</td>
</tr>
<tr>
<td>지옥 시즌1</td>
<td>6회</td>
<td>142,850,000시간</td>
</tr>
<tr>
<td>소년심판</td>
<td>10회</td>
<td>134,560,000시간</td>
</tr>
<tr>
<td>종이의 집 : 공동경제구역</td>
<td>12회</td>
<td>133,510,000시간</td>
</tr>
<tr>
<td>사냥개들</td>
<td>8회</td>
<td>131,170,000시간</td>
</tr>
<tr>
<td>수리남</td>
<td>6회</td>
<td>130,350,000시간</td>
</tr>
</tbody>
</table>
</body>
</html>
# 출력결과
■ jQuery 테이블 Row 선택하여 Drag & Drop 하기
| 작품명 | 회차 | 누적 시청 시간 |
|---|---|---|
| 오징어 게임 | 9회 | 2,289,500,000시간 |
| 지금 우리 학교는 시즌1 | 12회 | 659,510,000시간 |
| 더 글로리 | 16회 | 560,990,000시간 |
| 마이 네임 | 8회 | 194,140,000시간 |
| 지옥 시즌1 | 6회 | 142,850,000시간 |
| 소년심판 | 10회 | 134,560,000시간 |
| 종이의 집 : 공동경제구역 | 12회 | 133,510,000시간 |
| 사냥개들 | 8회 | 131,170,000시간 |
| 수리남 | 6회 | 130,350,000시간 |
728x90
'jQuery' 카테고리의 다른 글
| [jQuery] DAUM - 우편번호 API 서비스 Mobile 화면에서 사용 (0) | 2023.08.12 |
|---|---|
| [jQuery] DAUM - 우편번호 API 서비스 사용 샘플 (0) | 2023.08.12 |
| [Spring] 소스트리 연동 프로젝트 이클립스에서 import 하는 방법 (0) | 2023.04.06 |