[jquery] ui 라이브러리에서 소트하는 기능(sortable)
아작스로 서버에 전송하는 기능까지 테스트 된것입니다.
jQuery 버전에 따라서 ajax 전송하는 방식이 약간 다른 부분이 있으니 버전 참고하세요.
본인이 현재 사용하는것과 여기 샘플의 버전이 비슷하면 문제가 되지 않을듯 싶습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery UI Sortable - 아작스 전송하기</title>
</head>
<style>
#sortable {
margin: 0;
padding: 0;
list-style-type: none;
width: 500px
}
#sortable li {
margin: 0 0.3em 0.3em 0;
padding: 5px 5px 5px 5px;
border: 1px black solid;
text-align: center;
float: left;
width: 110px;
cursor: hand;
}
</style>
<body>
<ul id="sortable">
<li data-keyn="11" class="ui-state-default">1</li>
<li data-keyn="12" class="ui-state-default">2</li>
<li data-keyn="3" class="ui-state-default">3</li>
<li data-keyn="4" class="ui-state-default">4</li>
<li data-keyn="21" class="ui-state-default">11</li>
<li data-keyn="22" class="ui-state-default">12</li>
</ul>
<input type='button' value='sortable btn' onclick='sort_data_send()'/>
<script>
$(document).ready(function()
{
// $( function() {
// $( "#sortable" ).sortable();
// $( "#sortable" ).disableSelection();
// } );
$(document).ready(function () {
$('#sortable').sortable({
cursor : "move",
// 드래그 앤 드롭 단위 css 선택자
// connectWith: ".column",
// 움직이는 css 선택자
// handle: ".card-header",
// 움직이지 못하는 css 선택자
// cancel: ".no-move",
// 이동하려는 location에 추가 되는 클래스
// placeholder: "card-placeholder",
// 요소를 잡는 순간 실행
start : function(event, ui){
// $(this).css('background-color', 'rgb(213,222,232)');
console.log('시작 -- ');
},
// 모든 이동이 끝난 후에 마지막으로 실행
stop : function(event, ui){
// $(this).css('background-color', 'transparent');
console.log('끄으읃 ~~');
}
});
$( "#sortable" ).disableSelection();
});
function sort_data_send()
{
let aDataList = [];
// listNum 0 부터 시작 한다.
$("#sortable li").each(function( listNum ) {
let data_keyn = $(this).attr('data-keyn');
aDataList.push(data_keyn);
// console.log('listNum: ', listNum);
// console.log('aDataList', aDataList);
});
let dataList = aDataList.join(',');
// console.log('dataList', dataList);
// send
let form = new FormData();
form.append( "dataList", dataList );
form.append( "mode", "image");
jQuery.ajax({
url : "/www/tt.php"
, type : "POST"
, processData : false
, contentType : false
, data : form
, success : function(response) {
console.log(response);
}
,error : function(jqXHR) {
console.log(jqXHR.responseText);
}
});
}
sort_data_send();
});
</script>
</body>
</html>
서버에서 받아지면 확인용은 아래 처럼 합니다.
실제는 디비처리 등을 하겠죠. 아래는 테스트 할때 확인 용 입니다.
if ( $_POST )
{
// echo '<pre>' . print_r($_POST, true) . '</pre>';
echo json_encode($_POST, JSON_UNESCAPED_UNICODE);
exit;
}
data-keyn 속성으로 된 부분의 값이 서버로 전송이 됩니다.
그리고 formData 만들어 주는 부분이 있는데 이곳에 본인이 필요한 파라미터를 넣어 주면 됩니다.
본인의 상황에 맞게 수정해 사용하시면 됩니다.
예를 들면 무조건 페이지 읽히면서 sort_data_send(); 실행 하게 되어 있는데. 단순 확인 용입니다. 버튼 클릭하기 전에 보려고~
● 참고한 곳
https://api.jqueryui.com/sortable/