분류 순서 조절을 좀 더 쉽게 jquery sortable 적용

영카트5 관리자에서 분류 순서를 ca_order 를 이용해 조정할 수 있습니다.
그러나 숫자를 직접 입력해야 하는 불편함이 있기 때문에 이번에 작업한 고객사에서
좀 더 쉬운 방법이 없겠느냐는 요청에 jquery sortable 를 적용해서 마우스로 순서를
한 화면에서 변경할 수 있도록 해봤습니다.

전체 코드는 첨부한 압축 파일을 다운로드 하셔서 확인하시면 됩니다.
순서는 5차분류까지는 가능하도록 했지만 실제 테스트는 3차까지만 했습니다. ^^;

[code]
<?php
$sub_menu = '400210';
include_once('./_common.php');

auth_check($auth[$sub_menu], "w");

add_javascript('<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>', 10);
//add_stylesheet('<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">', 10);

$g5['title'] = '분류순서관리';
include_once (G5_ADMIN_PATH.'/admin.head.php');

$sql_where = " where char_length(ca_id) = '2' ";

$sql_common = " from {$g5['g5_shop_category_table']} ";

$sql_order = "order by ca_order asc, ca_id asc";

// 출력할 레코드를 얻음
$sql = " select ca_id, ca_name {$sql_common} {$sql_where} {$sql_order} ";
$result = sql_query($sql);

$listall = '<a href="'.$_SERVER['SCRIPT_NAME'].'" class="ov_listall">전체목록</a>';
?>

<style>
.categoryorder ol {list-style:none;}
.categoryorder li {background-color: #fff;margin: 5px 0;padding: 5px; border: 1px solid #d6dce7;cursor:move;}
.categoryorder .cdepth-1:nth-child(even){background:#eff3f9}
</style>

<div class="local_ov01 local_ov">
<?php echo $listall; ?>
</div>

<form name="fcategoryorder" method="post" action="./categoryorderupdate.php" autocomplete="off">
<input type="hidden" name="sst" value="<?php echo $sst; ?>">
<input type="hidden" name="sod" value="<?php echo $sod; ?>">
<input type="hidden" name="sfl" value="<?php echo $sfl; ?>">
<input type="hidden" name="stx" value="<?php echo $stx; ?>">
<input type="hidden" name="page" value="<?php echo $page; ?>">

<div id="sct" class="grid_16 categoryorder">
<ol class="sortable">
<?php
for($i=0; $row=sql_fetch_array($result); $i++) {
$sql2 = " select ca_id, ca_name {$sql_common} where substring(ca_id, 1, 2) = '{$row['ca_id']}' and char_length(ca_id) = '4' order by ca_order asc, ca_id asc ";
$result2 = sql_query($sql2);
?>
<li class="cdepth-1" data-ca_id="<?php echo $row['ca_id']; ?>">
<strong><?php echo get_text($row['ca_name']); ?></strong>

<?php if (sql_num_rows($result2) > 0) { ?>
<ol class="depth sortable2">
<?php
for($j=0; $row2=sql_fetch_array($result2); $j++) {
$sql3 = " select ca_id, ca_name {$sql_common} where substring(ca_id, 1, 4) = '{$row2['ca_id']}' and char_length(ca_id) = '6' order by ca_order asc, ca_id asc ";
$result3 = sql_query($sql3);
?>
<li class="cdepth-2" data-ca_id="<?php echo $row2['ca_id']; ?>">
<?php echo get_text($row2['ca_name']); ?>

<?php if (sql_num_rows($result3) > 0) { ?>
<ol class="depth sortable3">
<?php
for($k=0; $row3=sql_fetch_array($result3); $k++) {
$sql4 = " select ca_id, ca_name {$sql_common} where substring(ca_id, 1, 6) = '{$row3['ca_id']}' and char_length(ca_id) = '8' order by ca_order asc, ca_id asc ";
$result4 = sql_query($sql4);
?>
<li class="cdepth-3" data-ca_id="<?php echo $row3['ca_id']; ?>">
<?php echo get_text($row3['ca_name']); ?>

<?php if (sql_num_rows($result4) > 0) { ?>
<ol class="depth sortable4">
<?php
for($l=0; $row4=sql_fetch_array($result4); $l++) {
$sql5 = " select ca_id, ca_name {$sql_common} where substring(ca_id, 1, 8) = '{$row4['ca_id']}' and char_length(ca_id) = '10' order by ca_order asc, ca_id asc ";
$result5 = sql_query($sql5);
?>
<li class="cdepth-4" data-ca_id="<?php echo $row4['ca_id']; ?>">
<?php echo get_text($row4['ca_name']); ?>

<?php if (sql_num_rows($result4) > 0) { ?>
<ol class="depth sortable5">
<?php
for($n=0; $row5=sql_fetch_array($result5); $n++) {
?>
<li class="cdepth-5" data-ca_id="<?php echo $row5['ca_id']; ?>">
<?php echo get_text($row5['ca_name']); ?>
</li>
<?php } ?>
</ol>
<?php } ?>
</li>
<?php } ?>
</ol>
<?php } ?>
</li>
<?php } ?>
</ol>
<?php } ?>
</li>
<?php } ?>
</ol>
<?php } ?>
</li>
<?php
}
?>
</ol>
</div>

<div class="btn_fixed_top">
<input type="submit" value="수정" class="btn_02 btn">
</div>
</form>

<script>
$(function() {
$( ".sortable, .sortable2, .sortable3, .sortable4, .sortable5" ).sortable();
$( ".sortable, .sortable2, .sortable3, .sortable4, .sortable5" ).disableSelection();

$("form[name='fcategoryorder']").on("submit", function(e) {
e.preventDefault();
e.stopPropagation();

if(!confirm("분류순서를 수정하시겠습니까?"))
return false;

var ca_id;
var ca_id2;
var ca_id3;
var ca_id4;
var ca_id5;

var order;
var order2;
var order3;
var order4;
var order5;

var data = new Object();

$(".cdepth-1").each(function(i) {
ca_id = $(this).data("ca_id");
order = i + 1;

data[ca_id] = order;

$(this).find(".cdepth-2").each(function(j) {
ca_id2 = $(this).data("ca_id");
order2 = order + "" + (j + 1);

data[ca_id2] = order2;

$(this).find(".cdepth-3").each(function(k) {
ca_id3 = $(this).data("ca_id");
order3 = order2 + "" + (k + 1);

data[ca_id3] = order3;

$(this).find(".cdepth-4").each(function(l) {
ca_id4 = $(this).data("ca_id");
order4 = order3 + "" + (l + 1);

data[ca_id4] = order4;

$(this).find(".cdepth-5").each(function(m) {
ca_id5 = $(this).data("ca_id");
order5 = order4 + "" + (m + 1);

data[ca_id5] = order5;
});
});
});
});
});

$.ajax({
url: "./categoryorderupdate.php",
type: "post",
data: {token: $("input[name='token']").val(), data: JSON.stringify(data)},
success : function( data ){
if (data != "ok") {
alert(data);
return false;
}

document.location.reload();
},
error : function( jqxhr , status , error ){
console.log( jqxhr , status , error );
}
});
});
});
</script>

<?php
include_once (G5_ADMIN_PATH.'/admin.tail.php');
?>
[/code]