dom element를 자유롭게 움직이고 수정할 수있게 하는 gridstack.js 소개

기존에 jquery-ui에서 sortable 메서드를 사용하여 element들을 자유롭게 움직일 수 있다.

하지만 미세한 이동이 어렵고, 크기 조절까지 한번에 하기에는 부적절하다.
그래서 검색결과 gridstack.js를 사용하면 편리하게 크기 조절 및 위치 이동까지 자유롭게 할 수있다는 것을 알았다.

[필요 라이브러리]
gridstack.js를 사용하기 위해서는 하단의 정보와 같이 몇몇 라이브러리가 필요하다.

[예제 코드]
1. package.json
-> 필요라이브러리가 추가된 package.json

{
  "name": "gridstack_test",
  "version": "1.0.0",
  "description": "gridstack_test",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "wedul",
  "license": "ISC",
  "dependencies": {
    "gridstack": "^0.4.0",
    "jquery": "^3.3.1",
    "jquery-ui": "^1.12.1",
    "jquery-ui-dist": "^1.12.1",
    "lodash.js": "^1.0.1",
    "underscore": "^1.9.0"
  }
}

2. html
-> libarary 로드 후 html에 적용

<link rel="stylesheet" href="lib/jquery-ui.css"></link>
<link rel="stylesheet" href="node_modules/gridstack/dist/gridstack.css"></link>
<style>
.grid-stack-item {
  border: 1px solid;
  background-color: #eee;
}
</style>
 
<button id="addBtn">항목 추가</button>
 
<div class="grid-stack">
    <div class="grid-stack-item"
        data-gs-x="0" data-gs-y="0"
        data-gs-width="4" data-gs-height="2">
            <div class="grid-stack-item-content">기존항목1</div>
    </div>
    <div class="grid-stack-item"
        data-gs-x="4" data-gs-y="0"
        data-gs-width="4" data-gs-height="4">
            <div class="grid-stack-item-content">기존항목2</div>
    </div>
</div>
 
<script type="text/javascript" src="node_modules/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="node_modules/underscore/underscore.js"/></script>
<script type="text/javascript" src="lib/jquery-ui.js"/></script>
<script type="text/javascript" src="node_modules/gridstack/dist/gridstack.all.js"/></script>
<script type="text/javascript">
$(document).ready(function () {
  var options = {
      cellHeight: 80,
      verticalMargin: 10
  };
  $('.grid-stack').gridstack(options);
 
  let a = 0;
  $('#addBtn').click(() => {
    let $html = '<div id="'+ a + '" class="grid-stack-item" data-gs-x="0" data-gs-y="2" data-gs-width="4" data-gs-height="2">';
    $html += '<div class="grid-stack-item-content">추가된 항목</div></div>';
 
    $($html).appendTo($('.grid-stack'));
    $('.grid-stack').gridstack();
 
    var grid = $('.grid-stack').data('gridstack');
    grid.addWidget($('#' + a));
    a++;
  });
});
</script>

[결과화면]
-> 자유롭게 위치 이동이 가능하고 사이즈 조절이 가능해진다.

[추가정보]
만약 기존에 element이외에 새로운 element에도 gridstack.js를 적용하고 싶은경우에는 다음과 같이 진행해야 한다.

위에 예제 소스에 있지만 필요한 소스는 다음과 같다.

let $html = '<div id="'+ a + '" class="grid-stack-item" data-gs-x="0" data-gs-y="2" data-gs-width="4" data-gs-height="2">';
    $html += '<div class="grid-stack-item-content">추가된 항목</div></div>';
 
    $($html).appendTo($('.grid-stack'));
    $('.grid-stack').gridstack();
 
    var grid = $('.grid-stack').data('gridstack');
    grid.addWidget($('#' + a));

gridstack 요소를 가져온 후  addWidget(el)메소드를 사용하여 추가한다.

[속성소개]
- 각 elemenet들이 가지고 있는 몇 가지 속성들이 있다. 모두 소개할 수는 없고 가로, 세로, 위치 좌표에 대한 정보만 소개하겠다. (나머지는 API문서 참고)

위에 소스에서 보면 다음과 같이 속성들을 가지고 있다.

data-gs-x="5"            위치 x좌표 
data-gs-y="0"            위치 y좌표
data-gs-width="4"    가로크기
data-gs-height="4"   세로크기

해당 데이터를 접근하기 위해서는 $('#id').data('gs-x')와 같은 방식으로 접근하면 된다.


[참고자료]
gridstack.js 사이트
http://gridstackjs.com/

github 사이트
https://github.com/gridstack/gridstack.js#api-documentation

API 문서 사이트
https://github.com/gridstack/gridstack.js/tree/develop/doc