■ jQuery :: sortable()을 이용한 레이어 재배치
sortable 기능을 사용하면 클릭 드래그 형태로 이미 지정된 엘리먼트의 위치를, 변경하고, 지정할 수 있다.
해당 포스팅은 단순히 엘리먼트의 위치를 지정하는데 그치지 않고.
지정된 위치에따른 값을 재배치할 수 있게 재배치된 순서(indxe)값을 전송하는 것까지 목표로 하였다.
# 소스코드 - 테이블 행의 순서를 변경하고 그 값을 전송할 sortable_transmit.php
sortable_transmit.php
|
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>:: jQuery 마우스 드래그 테이블 ::</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style type="text/css">
body { text-align:center; }
.girlGroup { list-style-type:none;margin:0;padding:0;width:100%; }
.girlGroup li { margin:3px;padding:0.4em;font-size:1em;height:18px;text-align:center; }
.memberRow { border:solid 1px #C5C5C5;background:#F6F6F6; }
</style>
<script type="text/JavaScript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/JavaScript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
// sortable은 객체의 순서를 재배치 할 수 있다.
jQuery(".girlGroup").sortable();
jQuery(".memberRow").mouseover(function() {
jQuery(".memberRow").css("border", "solid 1px #C5C5C5").css("background", "#F6F6F6");
var idx = jQuery(".memberRow").index(this);
jQuery(".memberRow").eq(idx).css("border", "solid 3px #FF0000").css("background", "#FFC0CB");
});
});
function wujuSonyeoTransmit() {
var girls = "";
// memberRow의 개수만큼 반복문을 돌리면서 enName값을 콤마로 구분하여 하나의 문자열로 만든다.
jQuery(".memberRow").each(function(idx) {
// 한글 이름을 전송
// girls += jQuery(".memberRow").eq(idx).text + ", ";
// 영문 이름을 전송
girls += jQuery(".memberRow").eq(idx).attr("enName") + ",";
});
// 마지막 콤마 제거 후, 값을 cosmicGirls 에 담는다.
jQuery("#cosmicGirls").val(girls.slice(0, -1));
jQuery("#sortTableForm").attr("action", "./sortable_receive.php");
jQuery("#sortTableForm").submit();
}
</script>
</head>
<body>
<form method="post" id="sortTableForm" name="sortTableForm">
<input type="hidden" id="cosmicGirls" name="cosmicGirls" value=""/>
<h1>우 주 소 녀</h1>
<ul class="girlGroup">
<li class="memberRow" enName="seola">설아</li>
<li class="memberRow" enName="xuanyi">선의</li>
<li class="memberRow" enName="bona">보나</li>
<li class="memberRow" enName="exy">엑시</li>
<li class="memberRow" enName="soobin">수빈</li>
<li class="memberRow" enName="luda">루다</li>
<li class="memberRow" enName="dawon">다원</li>
<li class="memberRow" enName="eunseo">은서</li>
<li class="memberRow" enName="chengxiao">성소</li>
<li class="memberRow" enName="meiqi">미기</li>
<li class="memberRow" enName="yeoreum">여름</li>
<li class="memberRow" enName="dayoung">다영</li>
<li class="memberRow" enName="yeonjung">연정</li>
</ul>
<br/>
<input type="button" onClick="wujuSonyeoTransmit();" value="전송"/>
</form>
</body>
</html>
|
# 소스코드 - 테이블 행의 순서를 변경하고 그 값을 전송받을 sortable_receive.php
sortable_receive.php
|
<?php
$wujuSonyeo = explode(",", $_POST['cosmicGirls']);
echo "<pre>";
print_r($wujuSonyeo);
echo "</pre>";
?>
|
# 출력결과
