Easy Widgets를 이용한 정렬 순서 수정

어제 jQuery Plugin Easy Widgets 포스트에서 구상했던 페이지를 간단하게 구현해봤다.
작업은 생각한 것보다 어렵지 않았고 jQuery를 이용했기 때문에 쉽게 구현이 될 수 있었던 것 같다.

이 기능은 쇼핑몰에서 상품 리스트 정렬 순서를 변경할 때 사용하려고 한다. 상품 리스트에서 상품 순서를 변경 후
완료 버튼을 누르면 모든 상품에 대해서 정렬 순서를 변경하는 것이 핵심이다. 단 상품이 아주 많다면.. 생각을.. ㅋ

이런 식으로 위젯을 마우스로 드래그하면 위치를 바꿀 수 있는데 각 위젯은 고유한 index를 가지게 된다.
이 index를 정렬 순서로 변경하는 것이 핵심이라면 핵심이다. 아래는 실제 테스트한 소스 코드들이다.
쇼핑몰이 영카트4 기반으로 제작되기 때문에 기본 코드들은 그냥 사용했다.

widgets.php

<?php
include_once("./_common.php");

include_once("$g4[path]/head.sub.php");

$sql = " select no from widget order by ord asc ";
$result = sql_query($sql);
?>

<link rel="stylesheet" href="<?=$g4['path']?>/widgets.css" type="text/css">

<script type="text/javascript" src="<?=$g4['path']?>/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="<?=$g4['path']?>/js/jquery.easywidgets.min.js"></script>

<script type="text/javascript">
$(function(){
    $.fn.EasyWidgets({
        behaviour : {
            dragDelay : 100,
            dragRevert : 100,
            dragOpacity : 0.8,
            useCookies : false
        }
    });

    $('#Btn').click(function() {
        var wcnt = $('.widget').size();

        for(i=0; i<wcnt; i++) {
            var idx = $('.widget').index($('.widget:eq(' + i + ')'));
            var no = $('.widget:eq(' + i + ')').attr("id").replace("no", "");

            $.post(
                'widgets_update.php',
                { no: no, order: idx }
            );
        }
    });
});
</script>

<div id="wrap">
    <div class="widget-place">
        <?php
        for($i = 0; $row = sql_fetch_array($result); $i++) {
        ?>
        <div class="widget  movable" id="no<?=$row[no]?>">
            <div class="widget-header">위젯<?=$row[no]?></div>
            <div class="widget-content">위젯 내용</div>
        </div>
        <?php
        }
        ?>
    </div>
    <div id="Button"><button id="Btn">완료</button></div>
</div>

<?php
inlcude_once("$g4[path]/tail.sub.php");
?>

widgets_update.php

<?php
include_once("./_common.php");

if(!$no) {
    exit;
}

$sql = " update widget set ord = '$order' where no = '$no' ";
sql_query($sql);
?>

widgets.css

@charset "utf-8";

#wrap { width: 800px; padding-top: 30px; }
.widget-place { width: 800px; height: auto; float: left; list-style: none; }
.widget-placeholder { width: 148px; height: 98px; float: left; margin: 0 0 30px 40px; border: 1px dashed #ccc; background: #eee; }
.widget { width: 148px; height: 98px; float: left; margin: 0 0 30px 40px; border: 1px solid #ddd; }
.widget-header { height: 20px; font-weight: bold; color: #666; background: #ccc; }
.widget-content { width: 148px; height: 78px; }

#Button { clear: both; width: 800px; padding-top: 20px; text-align: right; }

단순히 기능 테스트용으로 작성했기 때문에 실제 페이지에서는 디자인적 요소를 많이 첨가해야할 것 같다.
하지만 상품의 정렬을 이런 식으로 하게 되면 클라이언트에게 좀 더 어필할 수 있는 부분이 아닐까 싶다는.. ㅋ


<<추가>>
어제 포스트 올리고 테스트를 하던 도중 IE9에서는 제대로 작동하지 않는 문제가 있었다. jQuery UI 플러그인의
버전이 낮아서 생긴 문제로 최신 버전으로 교체하여 주면 정상 작동하는 것을 확인하였다.


<<수정 2011.10.27. 14:33>>
widgets.php 파일의 스크립트 부분을 조금 수정해서 배열로 데이터를 넘기도록 했다. 이게 좀 더 나을 것 같아서..

<link rel="stylesheet" href="<?=$g4['path']?>/widgets.css" type="text/css">

<script type="text/javascript" src="<?=$g4['path']?>/js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="<?=$g4['path']?>/js/jquery.easywidgets.min.js"></script>

<script type="text/javascript">
$(function(){
    $.fn.EasyWidgets({
        behaviour : {
            dragDelay : 100,
            dragRevert : 100,
            dragOpacity : 0.8,
            useCookies : false
        }
    });

    $('#Btn').click(function() {
        var wcnt = $('.widget').size();

        var idxArray = new Array();
        var noArray = new Array();

        for(i=0; i<wcnt; i++) {
            var idx = $('.widget').index($('.widget:eq(' + i + ')'));
            var no = $('.widget:eq(' + i + ')').attr("id").replace("no", "");

            idxArray.push(idx);
            noArray.push(no);
        }

        $.post(
            'widgets_update.php',
            { 'no[]': noArray, 'order[]': idxArray },
            function(data) {
                if(data == "100") {
                    alert("데이터가 제대로 넘어오지 않았습니다.");
                    return false;
                } else if(data == "5000") {
                    alert("상품 정렬이 완료되었습니다.");
                    return;
                }
            }
        );
    });
});
</script>

<div id="wrap">
    <div class="widget-place">
        <?php
        for($i = 0; $row = sql_fetch_array($result); $i++) {
        ?>
        <div class="widget  movable" id="no<?=$row[no]?>">
            <div class="widget-header">위젯<?=$row[no]?></div>
            <div class="widget-content">위젯 내용</div>
        </div>
        <?php
        }
        ?>
    </div>
    <div id="Button"><button id="Btn">완료</button></div>
</div>

배열로 넘오오는 데이터를 처리하기 위해 widgets_update.php 파일 역시 수정.

<?php
include_once("./_common.php");

if(count($no) < 1) {
    echo "100";
    exit;
}

for($i = 0; $i < count($no); $i++) {
    $sql = " update widget set ord = '$order[$i]' where no = '$no[$i]' ";
    sql_query($sql);
}

echo "5000";
exit;
?>