단 1줄로 드래그하여 순서 변경하는 효과만들기 jQuery-Sortable

드래그하여 순서를 변경할 수 있는 효과를 만들었다.

이 효과는 특히 모바일에서 쉽게 볼 수 있다.

 

jQuery UI - Sortable 를 이용하면 아주 간단하게 구현할 수 있다.

 

아래는 해당 예제이다.

 

 

1. HTML

제이쿼리에서 제공하는 UI이기 때문에 특정 class명을 사용하면 css가 적용된다.

div, span, ul, li 등 무엇을 사용해도 상관없으며 드래그를 원하는 큰 틀에 id="sortable" 만 작성하면 된다.

Item1~Item6 까지 정상적으로 드래그된다.

 

<div id="sortable">
    <div>Item 1</div>
    <div>Item 2</div>
    <div class="ui-state-default">Item 3</div>
    <div class="ui-state-default">Item 4</div>
    <div class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</div>
    <div class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</div>
</div>

 

 

2. script

제이쿼리 작동을 위한 CDN을 넣어주고

드래그를 위한 스크립트는 단 한 줄이면 된다.

 

//필수
<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>

//모바일의 경우 추가할것
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>

<script>
    $(function () {
      // 드래그 순서변경
      $("#sortable").sortable();

      // 글자를 드래그해서 선택하지 못하게함
      $("#sortable").disableSelection();
    });
</script>

 

만약 특정 아이콘으로만 드래그가 가능하게 하고싶다면,

예를들면 위의 예제에서 Item5~6에 있는 아이콘으로만 드래그가 가능하게 만들고싶다면

아래의 코드처럼 handle: ".ui-icon" 을 추가하면된다. 

 

또, 드래그되는 영역을 제한 할 수도 있다.

아래 코드를 참고.

 

<script>
    $(function () {
      // 드래그 순서변경
      $("#sortable").sortable({
      	// 핸들링될 특정 영역을 지정할 수 있음
        handle: ".ui-icon"
        // 세로로만 드래그되도록 영역 제한
        axis: "y"
      });

      // 글자를 드래그해서 선택하지 못하게함
      $("#sortable").disableSelection();

    });
  </script>

 

아래의 제이쿼리 사이트에 가면 다양한 예제를 참고할 수 있다.

https://jqueryui.com/sortable/