jQuery 드래그 앤 드롭 플러그인 Gridster 사용 가이드_jquery

gridster.js는 다중 열 레이아웃을 지원하는 직관적인 드래그 앤 드롭 레이아웃을 구축하는 데 사용되는 jQuery 플러그인입니다. 또한 테이블의 요소를 동적으로 추가하고 삭제할 수도 있습니다.

1.그리드스터 플러그인 기능

win8 타일 드래그 앤 드롭과 유사한 기능 구현

2.그리드스터 공식주소

http://gridster.net/

공식 홈페이지에도 플러그인 도움말과 예제가 있는데, 공식 지침에 따르면 로컬에서 테스트할 때 항상 이런 문제가 발생하는데, 하나는 이동할 수 없다는 것이고, 다른 하나는 있다는 것입니다. 는 자석 근처의 검은 점으로 위치 지정에 사용됩니다. 하지만 웹사이트에서 정상적으로 사용한다면 이러한 검은 반점은 나타나지 않을 것입니다. 그리드스터 플러그인의 속성과 방법은 공식 홈페이지에 자세히 설명되어 있습니다.

테스트 결과 드디어 문제가 해결되었습니다. 효과는 다음과 같습니다.

3.그리드스터 사용법

1. 먼저 js 파일을 인용하세요

<script type="text/javascript" src=" jquery-1.7.2.min.js"></script>
<script type="text/javascript" src=" jquery.gridster.js"></script>
<link rel="stylesheet" type="text/css" href=" style.css" />

2.css 사용

<style type="text/css">
.handle {
  border-bottom: 1px solid black;
}
.small img{
  height:83px;
  width:97px;
}
.gridster {
  position:relative;
  background-color:#CCC;
} 

li {
  background-color: white;
  width: 150px;
  height: 300px;
  border: solid 2px black;
}

.gridster > * {
  margin: 0 auto;
  -webkit-transition: height .4s;
  -moz-transition: height .4s;
  -o-transition: height .4s;
  -ms-transition: height .4s;
  transition: height .4s;
}

.gridster .gs_w{
  z-index: 2;
  position: absolute;
}

.ready .gs_w:not(.preview-holder) {
  -webkit-transition: opacity .3s, left .3s, top .3s;
  -moz-transition: opacity .3s, left .3s, top .3s;
  -o-transition: opacity .3s, left .3s, top .3s;
  transition: opacity .3s, left .3s, top .3s;
}

.ready .gs_w:not(.preview-holder) {
  -webkit-transition: opacity .3s, left .3s, top .3s, width .3s, height .3s;
  -moz-transition: opacity .3s, left .3s, top .3s, width .3s, height .3s;
  -o-transition: opacity .3s, left .3s, top .3s, width .3s, height .3s;
  transition: opacity .3s, left .3s, top .3s, width .3s, height .3s;
}

.gridster .preview-holder {
  z-index: 1;
  position: absolute;
  background-color: #fff;
  border-color: #fff;
  opacity: 0.3;
}

.gridster .player-revert {
  z-index: 10!important;
  -webkit-transition: left .3s, top .3s!important;
  -moz-transition: left .3s, top .3s!important;
  -o-transition: left .3s, top .3s!important;
  transition: left .3s, top .3s!important;
}

.gridster .dragging {
  z-index: 10!important;
  -webkit-transition: all 0s !important;
  -moz-transition: all 0s !important;
  -o-transition: all 0s !important;
  transition: all 0s !important;
}
p{
  margin:10px;
}

3. 사용된 js 코드

$(function(){

  $(".gridster ul").gridster({
    widget_margins: [5, 5],
    widget_base_dimensions: [100, 100],
    draggable: {
      handle: '.handle'
    }
  });
  var gridster = $(".gridster ul").gridster().data('gridster');
});

4. HTML 사용

<div class="gridster">
  <ul id="reszable">
    <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"><div class="handle">1</div><div class="small"><img src="test.jpg" /></div></li>
    <li data-row="2" data-col="1" data-sizex="1" data-sizey="1"><div class="handle">2</div></li>
    <li data-row="3" data-col="1" data-sizex="1" data-sizey="1"><div class="handle">3</div></li>
    <li data-row="1" data-col="2" data-sizex="2" data-sizey="1"><div class="handle">4</div></li>
    <li data-row="2" data-col="2" data-sizex="2" data-sizey="2"><div class="handle">5</div><p>
    Like no other javascript library, Parsley has a full support for #UX concerns and detailed options. Override almost every Parsley default behaviors to fit your exact needs.</p></li>
    <li data-row="1" data-col="4" data-sizex="1" data-sizey="1"><div class="handle">6</div></li>
    <li data-row="2" data-col="4" data-sizex="2" data-sizey="1"><div class="handle">7</div></li>
    <li data-row="3" data-col="4" data-sizex="1" data-sizey="1"><div class="handle">8</div></li>
    <li data-row="1" data-col="5" data-sizex="1" data-sizey="1"><div class="handle">9</div></li>
    <li data-row="3" data-col="5" data-sizex="1" data-sizey="1"><div class="handle">10</div></li>
    <li data-row="1" data-col="6" data-sizex="1" data-sizey="1"><div class="handle">11</div></li>
    <li data-row="2" data-col="6" data-sizex="1" data-sizey="2"><div class="handle">12</div></li>
    <li data-row="1" data-col="7" data-sizex="1" data-sizey="1"><div class="handle">13</div></li>
    <li data-row="2" data-col="7" data-sizex="1" data-sizey="1"><div class="handle">14</div></li>
    <li data-row="3" data-col="7" data-sizex="1" data-sizey="1"><div class="handle">15</div></li>
  </ul>
</div>

4.그리드스터 사용법

Gridster 플러그인은 Chrome과 Firefox에서 정상적으로 작동하며, 특수 효과 표시 페이지도 정상적으로 작동합니다. 단, IE8에서는 정상적으로 표시되지만 드래그 효과는 표시되지 않습니다.

이제 열어서 드래그 효과를 볼 수 있습니다. 아, 너무 당황스럽네요! 원활하지 않다는 점도 아실 겁니다. 거드스터의 작은 버그나 불완전성일 수도 있으니, 어떻게 개선해야 할지에 대해서는 내일 말씀드리겠습니다!