jquery.gridster

ui-component grid layout

jquery.gridster는 드래그 앤 드롭을 지원하는 다중 열 그리드 시스템을 제공하는 jQuery 플러그인입니다. 이 라이브러리를 사용하면 사용자는 웹 페이지 내에서 위젯을 자유롭게 배치하고 조정할 수 있습니다.

Latest Ver 0.5.6

Homepage

Github

6,017

📢 jquery.gridster는 웹 페이지 내에서 사용자가 위젯을 쉽게 이동하고 크기를 조정할 수 있는 그리드 레이아웃 툴을 제공합니다.

CDN 다운로드

License: MIT

Asset Type :

전체 버전 보기

https://cdnjs.cloudflare.com/ajax/libs/jquery.gridster/0.5.6/jquery.gridster.js

https://cdnjs.cloudflare.com/ajax/libs/jquery.gridster/0.5.6/jquery.gridster.min.js

https://cdnjs.cloudflare.com/ajax/libs/jquery.gridster/0.5.6/jquery.gridster.with-extras.js

https://cdnjs.cloudflare.com/ajax/libs/jquery.gridster/0.5.6/jquery.gridster.with-extras.min.js

https://cdnjs.cloudflare.com/ajax/libs/jquery.gridster/0.5.6/jquery.gridster.css

https://cdnjs.cloudflare.com/ajax/libs/jquery.gridster/0.5.6/jquery.gridster.min.css

Sample Code

⚠️ import 문을 포함한 일부 코드는 jsFiddle에서 정상 실행되지 않을 수 있습니다. 실행 오류가 발생할 경우 코드 복사 후 직접 실행해보세요.

📄 HTML
<div class="gridster"><ul><li data-col="1" data-row="1" data-sizex="2" data-sizey="2">Item 1</li><li data-col="3" data-row="1" data-sizex="1" data-sizey="1">Item 2</li></ul></div><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/jquery.gridster/0.5.6/jquery.gridster.min.js" type="text/javascript"></script><script>$(function(){ $('.gridster ul').gridster({ widget_base_dimensions: [100, 100], widget_margins: [10, 10] }); });</script>

🎨 External CSS
<link href="https://cdn.jsdelivr.net/jquery.gridster/0.5.6/jquery.gridster.min.css" rel="stylesheet">

🧩 External JS
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.gridster/0.5.6/jquery.gridster.min.js"></script>

⚙️ JavaScript
$(function(){ $('.gridster ul').gridster({ widget_base_dimensions: [100, 100], widget_margins: [10, 10] }); });