[jquery] ui 라이브러리에서 소트하는 기능(sortable) > javascript
javascript

[jquery] ui 라이브러리에서 소트하는 기능(sortable)

조회 143회 댓글 0건

아작스로 서버에 전송하는 기능까지 테스트 된것입니다.

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;
  }
 


f08f4a3d7c3248096854e2720bc04fa9_1673666016_5885.png
 

data-keyn 속성으로 된 부분의 값이 서버로 전송이 됩니다.

그리고 formData 만들어 주는 부분이 있는데 이곳에 본인이 필요한 파라미터를 넣어 주면 됩니다.


본인의 상황에 맞게 수정해 사용하시면 됩니다.

예를 들면 무조건 페이지 읽히면서 sort_data_send(); 실행 하게 되어 있는데. 단순 확인 용입니다. 버튼 클릭하기 전에 보려고~


● 참고한 곳

https://velog.io/@cyhse7/%EB%81%8C%EC%96%B4%EB%8B%A4-%EB%86%93%EA%B8%B0-Jquery%EC%9D%98-.sortable-%EC%82%AC%EC%9A%A9

https://api.jqueryui.com/sortable/





  • 페이스북으로 공유
  • 트위터로  공유
  • 구글플러스로 공유
전체 91건 1 페이지
  • profile_image chat GPT API를 통해서 물어본것에 대한 테스트 인데요.잘 되네요.별도의 모듈설치 없이 그냥 실행 되었습니다. 제가 전에 다른것 하면서 설치 되었는지는 확인 안해 봤습니다.  // zlib 모듈을 불러온다.  const zlib = require('zlib');  const fs = require('fs');  // 압축할 문자열  const str = '압축할 문자열';  // gzip으로 압축한다.  zlib.gzip(str, (er…
  • profile_image 파일저장이나 또는 가져올때등 상대경로로 호출 하는 경우도 있지만때론 전체 경로를 알아야 되는 경우가 있습니다.그럴때 현재 디렉토리 기준으로 처리하면 좋은때 이럴때 사용 합니다.  // 현재 디렉토리   const _DIR_   = process.cwd();  php의 __DIR__ 과 같은 역활 입니다.확인 결과 위 예제는 잘 되는 것입니다. 현재 V16 버전에서 문제 없었습니다.버전 업그레이드가 심해서 안되는것 들이 종종 입니다.요즘 언어들 …
  • profile_image 현재 nodejs 실행중인 유저를 알아내기 위한 것입니다.같은 프로그램을 쉘에서 실행하기도 하고 웹서버를 통해서 실행하기도 합니다.그런 경우 파일을 쓰게 되면 문제가 발생합니다.  import os from "os";  let osUser  = os.userInfo().username;  if ( osUser  == 'root' ) {    console.log('루트 유저: ', osUser);  }  else {    console.log(…
  • profile_image 백엔드의 PDF-LIB에서 폰트를 지정하지 않으면 오류가 발생 합니다.영문은 문제 되지 않지만 한글의 경우 오류를 만나게 됩니다.그렇기 때문에 커스텀 폰드를 지정해야 하는데 스탠다드폰트가 아닌 별도 폰트를 사용할 때 필요한 부분입니다.Error: WinAnsi cannot encode "한" 이러한 오류를 만나게 된다면 한글을 사용할 수 없는 폰트이기 때문입니다.    // https://pdf-lib.js.org/#examples  impor…
  • profile_image 특정 문자로 구분자를 줘서 문자열로 만들어주는 함수인데요PHP의 implode에 해당하는 기능입니다.배열의 경우는 간단하게 join 메소드를 사용하면 되는데요. 객체는 안되기 때문에 만들어진것입니다.  let aa = {    'bb1' : 345,    'cc'  : 23,    'ee'  : 'abc'  }  let bb = ['name','2',33,5,'age'];    /**   * 문자열 구분자로 합치기   *   * @param s…
  • profile_image 파일명에서 파일의 확장자만 필요한 경우 사용합니다.자바스크립트 이긴 하지만 nodejs에서 사용해도 동일합니다.블라우저의 자바스크립트에서 사용하는 함수를 백엔드의 노드에서 사용해도 문제 없습니다.  /**   * 파일 확장자   *   * @param string file   *   * @return [type]   *   */  function file_ext( file ) {    let fileExt  = file.split(".").po…