li, table 드래그 앤 드롭 사용하기

jquery-ui-touch-punch-master.zip

0.00MB

 

태그가 li일경우

<ul class="delivery_sequence" id="sortable">
	<?
		$sql = sql_query("SELECT * FROM delivery_list where info_idx = '{$info_idx}' order by order_index asc ");
		for($i=0; $row = sql_fetch_array($sql); $i++){
			$store2 = get_member($row['mb_id']);
			$boxCnt = sql_fetch("SELECT SUM(prd_box) as sum FROM delivery_product where mb_id = '{$mb_id}' and mb_name = '{$row['mb_name']}' ");
			$mb = get_member($row['mb_id']);
			$address = $mb['mb_addr1']." ".$mb['mb_addr2'];
	?>
	<li class="ui-state-default" id="<? echo $row['list_idx']; ?>">
		<a href="<?php echo G5_THEME_URL ?>/mobile/01/delivery_info02.php">
			<p class="store_name"><? echo $row['mb_name']; ?>(<? echo $row['mb_id']; ?>)</p>
			<p class="no">배송수량 : <? echo number_format($store2['cnt']); ?>종류, <? echo number_format($boxCnt['cnt']); ?>박스</p>
			<p class="adr">주소 : <? echo $address; ?></p>
		</a>
	</li>
	<? } ?>
</ul>

<script>

$(function(){

		$("#sortable").sortable({
			update : function(event, ui){

				var idArray = [];
				var indexArray = [];
				$(".delivery_sequence li").each(function(index){
					idx = $(this).attr("id");
					inDex = index+1;
					idArray.push(idx);
					indexArray.push(inDex);
				})
				
                //순서를 저장해서 노출하시면 됩니다. 
				$.get("./delivery_order_update.php?idArray="+idArray+"&indexArray="+indexArray, function(data){
					//alert("순서가 변경되었습니다.");
					console.log(data);
				});
			}
		});
		$("#sortable").disableSelection();
    });
</script>

 

업데이트부분

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

$idArray = $_GET['idArray']; //고유 list_idx
$indexArray = $_GET['indexArray']; //현재 바뀐 index의 순서 위치

$splitArray = explode(",", $idArray);
$splitArray2 = explode(",", $indexArray);

for($i=0; $i<count($splitArray); $i++){
    sql_query("UPDATE delivery_list SET order_index = '{$splitArray2[$i]}' where list_idx = '{$splitArray[$i]}' ");
}

/*
foreach($table_1 as $key=>$value){
    $order = $key+1;
    sql_query("UPDATE delivery_list SET order_index = '{$order}' where list_idx = '{$value}' ");
    //echo '순번 '. ($key+1) . ' 번의 DB idx = '. $value . ', ';
}
*/
?>

 

table로 할 경우

깃헙 주소 github.com/isocra/TableDnD

isocra/TableDnD

<style>

.tDnD_whileDrag {
    /*z-index: 500;*/
    /*width: 90%;*/
    /*margin: -10px;*/
    /*display: table-cell;*/
    /*color: transparent;*/
    /*width: 0px*/
}
.tDnD_whileDrag td {
    background-color: #eee;
    /*-webkit-box-shadow: 11px 5px 12px 2px #333, 0 1px 0 #ccc inset, 0 -1px 0 #ccc inset;*/
    -webkit-box-shadow: 6px 3px 5px #555, 0 1px 0 #ccc inset, 0 -1px 0 #ccc inset;
    /*-moz-box-shadow: 6px 4px 5px 1px #555, 0 1px 0 #ccc inset, 0 -1px 0 #ccc inset;*/
    /*-box-shadow: 6px 4px 5px 1px #555, 0 1px 0 #ccc inset, 0 -1px 0 #ccc inset;*/
}
/*.tDnD_whileDrag td:first-child {*/
    /*-webkit-box-shadow: 5px 4px 5px 1px #111, 0 1px 0 #ccc inset, 1px -1px 0 #ccc inset;*/
    /*-moz-box-shadow: 6px 3px 5px 2px #555, 0 1px 0 #ccc inset, 0 -1px 0 #ccc inset, 1px 0 0 #ccc inset;*/
    /*-box-shadow: 6px 3px 5px 2px #555, 0 1px 0 #ccc inset, 0 -1px 0 #ccc inset, 1px 0 0 #ccc inset;*/
/*}*/
.tDnD_whileDrag td:last-child {
    /*-webkit-box-shadow: 8px 7px 12px 0 #333, 0 1px 0 #ccc inset, 0 -1px 0 #ccc inset;*/
    -webkit-box-shadow: 1px 8px 6px -4px #555, 0 1px 0 #ccc inset, 0 -1px 0 #ccc inset;
    /*-moz-box-shadow: 0 9px 4px -4px #555, 0 1px 0 #ccc inset, 0 -1px 0 #ccc inset, -1px 0 0 #ccc inset;*/
    /*-box-shadow: 0 9px 4px -4px #555, 0 1px 0 #ccc inset, 0 -1px 0 #ccc inset, -1px 0 0 #ccc inset;*/
}
    /*-webkit-box-shadow:  0 0 40px white, 10px 10px 15px black;*/
    /*-moz-box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset;*/
    /*-webkit-box-shadow: 0px 0px 40px 1px white, 0px 1px 1px 1px black;*/
    /*box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset;*/
/*}*/
/*.tDnD_whileDrag {*/
    /*background-color: black;*/
    /*position: relative;*/
    /*display: block;*/
    /*-moz-box-shadow: 0px 0px 40px 1px white, 0px 1px 1px 1px black;*/
    /*-webkit-box-shadow: 0px 0px 40px 1px white, 0px 1px 1px 1px black;*/
    /*box-shadow:        0px 0px 40px 1px white, 0px 1px 1px 1px black ;*/
    /*-webkit-box-shadow: 0 15px 10px -10px black, 0 1px 4px black, 0 0 10px darkgray inset;*/
    /*-webkit-box-shadow: 0 15px 10px -10px black, 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;*/
    /*-moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;*/
    /*box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;*/
    /*width: 90%;*/
    /*height: 90%;*/
    /*width: 100%;*/
    /*overflow: visible;*/
    /*z-index: 10000;*/
    /*opacity: .4;*/
    /*border-collapse: separate;*/
    /*filter:Alpha(Opacity=50);*/
    /*width: auto;*/

/*}*/

/*tr.alt td {*/
    /*width:200px*/
    /*-ms-transform:rotate(1deg;*/
    /*-moz-transform: rotate(0deg);*/
    /*-webkit-transform:rotate(0deg);*/
    /*-o-transform:rotate(0deg);*/
/*}*/
</style>

<?
    $sql = sql_query("SELECT * FROM delivery_list where info_idx = '{$info_idx}' order by order_index asc ");
    for($i=0; $row = sql_fetch_array($sql); $i++){
    $store = get_member($row['mb_id']);
	$boxCnt = sql_fetch("SELECT SUM(prd_box) as sum FROM delivery_product where mb_id = '{$mb_id}' and mb_name = '{$row['mb_name']}' ");

?>
<tr id="<? echo $row['list_idx']; ?>">
    <td>
      <? echo $row['mb_name']; ?>
        <? if($row['del_state'] == "완료" || $row['del_state'] == "미배송"){ ?>
        <input type="hidden" name="mb_id[]" value="<? echo $row['mb_id']; ?>">
      <? } ?>
    </td>
    <td><? echo $store['mb_hp']; ?></td>
    <td><? echo $store['mb_addr1']; ?> <? echo $store['mb_addr2']; ?> </td>
    <td><? echo number_format($row['total_cnt']); ?></td>
    <td><? echo number_format($boxCnt['sum']); ?></td>
    <td><? echo $row['est_datetime']; ?></td>
    <td><? echo $row['est_time']; ?>분</td>
    <td><? echo $row['com_datetime']; ?></td>
    <td><? echo $row['del_state']; ?></td>
	<td><a href="./delivery_product.php?mb_id=<? echo $mb_id; ?>&info_idx=<? echo $_GET['info_idx']; ?>&mb_name=<? echo $row['mb_name']; ?>" class="btn btn_02">수정</a></td>
</tr>
<? } ?>

<script>
$(function(){
        var ordered_items;
        onDragClass: "drag",
        $('#table_1').tableDnD({
            onDrop: function(table, row) {
                ordered_items = $.tableDnD.serialize('id');

                if(ordered_items){
                    $.get("./delivery_order_update.php?"+ordered_items, function(data){
                        alert("순서가 변경되었습니다.");
                    });
                }
            }
        });
});
</script>

 

update 부분

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

$table_1 = $_GET['table_1'];

foreach($table_1 as $key=>$value){
    $order = $key+1;
    sql_query("UPDATE delivery_list SET order_index = '{$order}' where list_idx = '{$value}' ");
    //echo '순번 '. ($key+1) . ' 번의 DB idx = '. $value . ', ';
}

?>

 

보시고 원하시는대로 맞춰 사용하시면 됩니다.