[jQuery] 클릭 드래그 방식으로, 테이블 위치 이동, 변경하기[jQuery] 클릭 드래그 방식으로, 테이블 위치 이동, 변경하기

Posted at 2018. 8. 9. 23:43 | Posted in JavaScript & jQuery/jQuery



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>우&nbsp;주&nbsp;소&nbsp;녀</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>";
?>




# 출력결과








Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기