[javascript/jquery] jquery sortable example / jquery 드래그해서 순서 변경하는 방법

[javascript/jquery] jquery sortable example / jquery 드래그해서 순서 변경하는 방법

 

 

jquery 를 사용하다보면

 

li 리스트의 항목을

 

드래그해서 위치를 변경하고 싶은 경우가 있습니다!

 

그럴때는 jquery 의

 

sortable 를 이용하시면 됩니다!

 

 

우선 필요한 라이브러리를 로드합니다.

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js" ></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" ></script>

 

그리고 아래와 같은 category 라는 ul 이 있다고 가정하고

 

하부 li 요소들의 클래스에 아래 나와있는

 

ui-state-default 클래스를 추가합니다.

<ul id="category">                                
    <li class="ui-state-default">111</li>
    <li class="ui-state-default">222</li>
</ul>

 

그리고는 category 라는 아이디를 가진

 

ul 에 아래와 같이 sortable 를 적용합니다.

 

$(function() {
    $("#category").sortable();
    $("#category").disableSelection();
});

 

그리고 테스트 하면 

 

너무깔끔하게 정상동작하는 것을

 

확인할 수 있습니다!

 

참고들 하세요!