<!doctype html>
 
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Sortable - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<style>
#category-1 { list-style-type: none; margin: 0; padding: 0; }
#category-1 li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; border:1px dotted;}
#category-1 li span { position: absolute; margin-left: -1.3em; }

#category-2 { list-style-type: none; margin: 0; padding: 0; }
#category-2 li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; border:1px dotted;}
#category-2 li span { position: absolute; margin-left: -1.3em; }

#category-3 { list-style-type: none; margin: 0; padding: 0; }
#category-3 li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; border:1px dotted;}
#category-3 li span { position: absolute; margin-left: -1.3em; }

#sortable4 { list-style-type: none; margin: 0; padding: 0; }
#sortable4 li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; border:1px dotted;}
#sortable4 li span { position: absolute; margin-left: -1.3em; }
</style>
</head>
<body>

<fieldset style="float:left;" id="fieldset-1">
<legend>1단계</legend>
<ul class="category" id="category-1"></ul>
</fieldset>

<fieldset style="float:left;" id="fieldset-2">
<legend>2단계</legend>
<ul class="category" id="category-2"></ul>
</fieldset>

<fieldset style="float:left;" id="fieldset-3">
<legend>3단계</legend>
<ul class="category" id="category-3"></ul>
</fieldset>

<div style="clear:both;">
<fieldset style="float:left;">
<legend>등록/수정</legend>
<input type="text" id="category_number" size="1" />단계 분류 선택중<br />
분류명 : <input type="text" id="ca_name" />
<button id="btn_add">추가</button>
<button id="btn_upd">수정</button>
</fieldset>
</div>

 
<script>
$(function(){
    var ca_number = -1; // 카테고리 셀렉트박스 번호
    function get_ca_number($elem) {
        return $elem.attr("id").split("-")[1];
    }

    $("fieldset[id^=fieldset-]").click(function(){
        ca_number = get_ca_number($(this));
        $("#category_number").val(ca_number);
    });

    $(".category").sortable();
    $(".category").disableSelection();
    //$( "#category-1" ).bind( "sortstop", function(event, ui) {
    $("#category-1").bind( "sortstop", function(event, ui) {

        /*
        var childList = $(this).children();
        for(i=0;i<childList.length;i++){
            var child = childList[i];
            var orderBy = 4 - i;
            var id = $(child).attr( "id" );
            $.ajax({
                type : "POST",
                url : "서버프로그램주소",
                dataType : 'json',
                // 서버로 전송할 데이터
                data : {
                    "id":id,
                    "orderBy":orderBy
                },
                success : function(msg){
                }
            });
        }
        */
    });

    $("#btn_add").click(function(){
        if (ca_number == -1) {
            alert("추가하실 분류 단계를 선택하세요.");
            return false;
        }

        var $ca_name = $("#ca_name");
        var ca_name = $.trim($ca_name.val());
        if (ca_name == "") {
            alert("분류명을 입력하세요.");
            $ca_name.focus();
            return false;
        }

        var $current = $("#category-"+ca_number); // 현재 카테고리 셀렉트박스
        var ca_id = $current.children("option:selected").val();

        $.ajax({
            url: "category.ajax.php", 
            type: "POST",
            data: {
                "ca_id": ca_id,
                "ca_name": ca_name,
                "ca_number": ca_number
            },
            dataType: "json",
            async: false,
            success: function(data, textStatus) {
                if (data.error) {
                    alert(data.error);
                    return false;
                }
                $current.append('<option value="'+data.ca_id+'" title="'+data.ca_id+'">'+data.ca_name+'</option>');
            }
        });
    });
});
</script>
</body>
</html>