728x90
JQuery-UI/Sortable
JQuery-UI란 CSS, JavaScript로 구현할 수 있는 UI를 쉽게 다룰 수 있도록 만들어진 API이다.
JQuery-UI의 Sortable를 사용하면 아이템의 순서를 바꿀 수 있다.
CDN
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>jQuery는 3.x 버전까지 있지만 구버전 브라우저와 호환을 위해 제일 안정적인 1.12.4버전을 사용을 권장한다고 한다.
사용방법
<script>
$( function() {
$( "#list" ).sortable();
</script>
</head>
<body>
<ol id="list" class="rankings">
<li id='ranking_1' class="ranking">가</li>
<li id='ranking_2' class="ranking">나</li>
<li id='ranking_3' class="ranking">다</li>
<li id='ranking_4' class="ranking">라</li>
<li id='ranking_5' class="ranking">마</li>
</ol>
</body>리스트 개체를 선택자로 .sortable() 메소드를 선언해주면 드래그앤 드랍을 사용할 수 있다.
items
만약 리스트가 아닌 개체나 원하는 요소를 지정해서 사용하고 싶으면 items 속성을 사용한다.
<script>
$( function() {
$( "#list" ).sortable({
items:$('.sort')
});
});
</script>
</head>
<body>
<ol id="list" class="rankings">
<li id='ranking_1' class="ranking sort">가</li>
<li id='ranking_2' class="ranking sort">나</li>
<li id='ranking_3' class="ranking sort">다</li>
<li id='ranking_4' class="ranking">라</li>
<li id='ranking_5' class="ranking">마</li>
</ol>
</body>이렇게 사용하게 되면 sort를 선언해준 가, 나, 다 아이템만 sortable속성이 적용 된다.
간단한 예제를 배워봤는데 sortable 메소드는 더 많은 옵션을 제공하고 있다.
다양한 옵션이 필요하다면 이 api 사이트 링크를 참고하자.
https://api.jqueryui.com/sortable/
또 다른 예제들
/* y축이 아닌 x축으로 정렬을 바꿀 때는 axis를 사용한다. */
$("#list").sortable({
axis:"x" /* 또는 y */
});
/* 아이템을 드래그할 때 선택되는 것을 막기 위해서는 disableSelection()을 사용한다*/
$("#list").sortable();
$("#list").disableSelection();
/* 드래그 앤 드랍할 시 컨트롤 하고다면 start/stop을 사용하자 */
$("#list").sortable({
start:function(event, ui){ /* 드래그 시 반응 제어 */
console.log("드래그");
},
stop:function(event, ui){ /* 드랍 시 반응 제어 */
console.log("드랍");
}
});
/* 아래와 같이 옮기려는 요소의 위치와 옮기고 난 뒤의 위치의 값을 구할 수도 있다 */
$("#list").sortable({
start:function(event, ui){
console.log("drag : " + (ui.item.index()));
},
stop:function(event, ui){
console.log("drop : " + (ui.item.index()));
},
});'Front > Javascript' 카테고리의 다른 글
| [JavaScript] Promise 개념 (0) | 2021.10.24 |
|---|---|
| [JavaScript] 스크립트 로딩 제어 (defer, async, onload, DOMContentLoaded) (0) | 2021.06.04 |
| [JavaScript] Ajax에 대해 (JQuery) (0) | 2021.05.26 |
| [JavaScript] 객체에 대해 (Objects) (0) | 2021.01.21 |
| [Javascript] 반복문(for, while) (0) | 2021.01.21 |
