드래그해서 순서를 바꿀 수 있는 리스트 만들기(jQuery UI - Sortable)

드래그해서 순서를 바꿀 수 있는 리스트 만들기(jQuery UI - Sortable)

프로그래밍/자바스크립트 2018. 8. 31. 22:47

 

순서가 있는 리스트에서 드래그 앤 드랍을 이용해서 아이템의 순서를 바꿀 수 있는 UI(사용자 인터페이스)가 jQuery UI에서 지원이 됩니다. Sortable 기능을 사용하면 원하는 기능을 구현할 수 있습니다.

 

jQuery UI 사이트의 예제에는 기존에 존재하는 리스트 항목을 드래그 앤 드랍으로 순서를 바꿀 수 있는 예제만 나옵니다. 이 글에서는 순서를 바꾸는것 외에 아이템을 추가하고, 삭제하는 기능까지 구현해 보겠습니다.

 

첫 번째 예제는 Sortable의 기본 기능을 확인해보고, 두 번째 예제에서는 추가, 삭제 기능도 포함된 예제를 보도록 하겠습니다.

 

 

1. 필요한 js 라이브러리들 불러오기

 

<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>

 

jQuery 라이브러리, jQuery UI 라이브러리와 스타일 시트가 필요합니다. 예제에서는 외부 라이브러리를 불러 사용했지만 필요하다면 다운로드 받아서 사이트에 넣어서 사용해도 됩니다.

 

 

2. Sortable 기본 기능

 

예제는 <ul> 태그를 사용하여 리스트를 구현한 것 입니다. 실행결과를 먼저보고, 예제 코드를 보도록 하겠습니다.

 

 

2.1. 예제 실행 결과

 

 

 

결과 이미지는 세 번째 아이템을 드래그해서 네 번째 아래로 이동중인 상태입니다. jQuery UI를 사용하면 이런 구현현을 쉽게 할 수 있습니다.

 

 

2.2. 리스트 구현 태그

 

드래그 가능한 리스트에 사용된 기본 HTML 소스가 되겠습니다. <ul> 태그를 사용했지만, 내부에 다른 태그를 가질 수 있는 어떤 태그도 가능합니다.

 

<ul id="sortable">

  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>

  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>

  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>

  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>

  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>

</ul>

 

"ui-state-default"나 "ui-icon", "ui-icon-arrowthick-2-n-s" 클래스는 jQuery UI 스타일 시트에 포함되어 있습니다.

 

 

2.3. 드래그 가능한 리스트로 만들기

 

$(function() {

    $("#sortable").sortable();

    $("#sortable").disableSelection();

});

 

- $("#sortable").sortable() : id가 "sortable" 인 태그의 내부에 포함된 태그를 사용해서 드래그 가능한 리스트를 만듭니다.

- $("#sortable").disableSelection() : 이 부분은 반드시 필요한 부분은 아닌데, 아이템 내부의 글자를 드래그 해서 선택하지 못하도록 하는 기능 입니다.

 

 

간단하게 jQuery UI Sortable의 기본 기능을 알아 보았습니다. 이제는 드래그 하여 순서를 변경할 수 있는 리스트에 아이템을 추가하고 삭제할 수 있는 예제를 만들어 보겠습니다. 이 예제는 <div> 태그를 사용해서 구현했습니다.

 

 

3. 추가, 삭제 기능이 있는 리스트 만들기

 

리스트의 기능입니다.

- 순서 텍스트와 입력필드를 가진 아이템을 리스트에 추가합니다.

- 각 아이템들을 마우스로 드래그해서 순서를 변경할 수 있습니다.

- 순서 변경시 아이템의 번호는 화면 순서대로 다시 매겨집니다.

- 아이템에 마우스를 오버하면 "삭제" 버튼이 보여지고 클릭하면 삭제됩니다.

 

 

 

 

3.1. UI 에사용된 태그 입니다.

 

<div>

    <div style="float:left;width:100px;">아이템 추가 : </div>

    <div style="clar:both;">

        <input type="button" id="addItem" value="추가" onclick="createItem();" />

        <input type="button" id="submitItem" value="제출" onclick="submitItem();" />

    </div>

</div>

<br />

<div id="itemBoxWrap"></div>

 

 

- "추가" 버튼은 아이템을 리스트에 추가합니다.

- "제출" 버튼은 아이템내의 입력필드에 입력한 내용을 제출하는 것을 가정합니다.

- <div id="itemBoxWrap"></div> : 리스트가 생성될 태그 입니다.

 

 

3.2. 리스트를 구성할 스타일 시트

 

<style>

.itemBox {

    border:solid 1px black;

    width:400px;

    height:50px;

    padding:10px;

    margin-bottom:10px;

}

.itemBoxHighlight {

    border:solid 1px black;

    width:400px;

    height:50px;

    padding:10px;

    margin-bottom:10px;

    background-color:yellow;

}

.deleteBox {

    float:right;

    display:none;

    cursor:pointer;

}

</style>

 

- itemBox : 리스트에 포함될 아이템을 위한 스타일 입니다.

- itemBoxHighlignt : 아이템을 드래그하면 놓은 자리를 알려주는 스타일 입니다.

- deleteBox : 아이템 삭제 버튼의 스타일 입니다. 이 버튼은 아이템에 마우스를 올리면 보여집니다.

 

 

3.3. 리스트 생성 코드

 

$(function() {

    $("#itemBoxWrap").sortable({

        placeholder:"itemBoxHighlight",

        start: function(event, ui) {

            ui.item.data('start_pos', ui.item.index());

        },

        stop: function(event, ui) {

            var spos = ui.item.data('start_pos');

            var epos = ui.item.index();

   reorder();

        }

    });

});

 

- $("#itemBoxWrap").sortable() : id 가 "itemBoxWrap" 인 태그를 리스트로 만듭니다.

- placeholder:"itemBoxHighlight" : 이 옵션은 드래그 중인 아이템이 놓일 자리를 표시할 스타일을 지정합니다.

- start: function(event, ui) { ... } : 드래그 시작시 호출되는 이벤트 핸들러 입니다.

- ui.item.index() : 드래그 하는 아이템의 위치를 가져옵니다. 첫 번째 아이템을 0 입니다.

- ui.item.data(key, value) : 아이템에 키, 값 쌍으로 데이터를 저장할 수 있습니다.

- stop: function(event, ui) { ... } : 드랍하면 호출되는 이벤트 핸들러 입니다.

- reorder() : 순서가 변경되면 모든 itemBox 내의 itemNum(입력필드 앞의 숫자)의 번호를 순서대로 다시 붙입니다.

 

function reorder() {

    $(".itemBox").each(function(i, box) {

        $(box).find(".itemNum").html(i + 1);

    });

}

 

 

3.4. 아이템 추가하기

 

아이템 추가 버튼을 누르면 실행됩니다.

 

function createItem() {

    $(createBox())

    .appendTo("#itemBoxWrap")

    .hover(

        function() {

            $(this).css('backgroundColor', '#f9f9f5');

            $(this).find('.deleteBox').show();

        },

        function() {

            $(this).css('background', 'none');

            $(this).find('.deleteBox').hide();

        }

    )

.append("<div class='deleteBox'>[삭제]</div>")

.find(".deleteBox").click(function() {

        var valueCheck = false;

        $(this).parent().find('input').each(function() {

            if($(this).attr("name") != "type" && $(this).val() != '') {

                valueCheck = true;

            }

        });

 

        if(valueCheck) {

            var delCheck = confirm('입력하신 내용이 있습니다.\n삭제하시겠습니까?');

        }

        if(!valueCheck || delCheck == true) {

            $(this).parent().remove();

            reorder();

        }

    });

    // 숫자를 다시 붙인다.

    reorder();

}

 

 

- $(createBox()).appendTo("#itemBoxWrap") : createBox()를 호출하여 아이템을 구성할 태그를 반환받아서 jQuery 객체로 만듭니다. 만들어진 아이템을 id가 "itemBoxWrap" 인 태그에 추가합니다.

 

// 아이템을 구성할 태그를 반환합니다.

// itemBox 내에 번호를 표시할 itemNum 과 입력필드가 있습니다.

function createBox() {

    var contents 

        = "<div class='itemBox'>"

        + "<div style='float:left;'>"

        + "<span class='itemNum'></span> "

        + "<input type='text' name='item' style='width:300px;'/>"

        + "</div>"

        + "</div>";

    return contents;

}

 

- .hover(function(){}, function(){}) : 아이템에 마우스 오버와 아웃시에 동작을 지정합니다. 오버시에는 배경색을 바꾸고 삭제 버튼을 보여줍니다. 아웃시에는 배경을 원래대로 돌리고 삭제 버튼을 숨깁니다.

- .append("<div class='deleteBox'>[삭제]</div>") : 아이템에 삭제 버튼을 추가합니다.

- .find(".deleteBox").click(function() { ... }) : 삭제 버튼을 클릭했을때 동작을 지정합니다. 아이템에 포함된 입력필드에 값이 있으면 정말 삭제할지 물어봅니다.

 

 

jQuery UI 의 Sortable 기능을 사용하여 아이템의 순서변경, 추가, 삭제 가 되는 리스트를 만들어 보았습니다. Sortable 기능의 API는 http://api.jqueryui.com/sortable/ 에서 찾아볼 수 있습니다. 예제 소스는 아래에 첨부해 두었습니다.

 

※ 예제소스

 sortable.zip

출처: https://offbyone.tistory.com/336 [쉬고 싶은 개발자]

드래그해서 순서를 바꿀 수 있는 리스트 만들기(jQuery UI - Sortable)

 

참고 : https://api.jqueryui.com/sortable/

Sortable Widget | jQuery UI API Documentation