gridstack.js

ui-component layout responsive

gridstack.jsはウィジェットレイアウトを作成するためのjQueryプラグインです。これを使用して、ドラッグアンドドロップでウィジェットを自由に配置し、サイズを調整することができます。レスポンシブウェブデザインをサポートし、さまざまな画面サイズに自動的に調整します。

Latest Ver 11.3.0

Homepage

Github

7,905

📢 gridstack.jsは、ドラッグアンドドロップとリサイズ可能なウィジェットレイアウトのためのjQueryベースのライブラリです。

CDNダウンロード

License: MIT

Asset Type :

すべてのバージョンを見る

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-base-impl.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-base-impl.min.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-draggable.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-draggable.min.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-droppable.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-droppable.min.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-element.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-element.min.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-gridstack.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-gridstack.min.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-manager.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-manager.min.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-resizable-handle.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-resizable-handle.min.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-resizable.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-resizable.min.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-touch.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-touch.min.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/gridstack-all.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/gridstack-all.min.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/gridstack-engine.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/gridstack-engine.min.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/gridstack.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/gridstack.min.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/types.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/types.min.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/utils.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/utils.min.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/gridstack-extra.css

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/gridstack-extra.min.css

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/gridstack.css

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/gridstack.min.css

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-base-impl.d.ts

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-draggable.d.ts

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-droppable.d.ts

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-element.d.ts

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-gridstack.d.ts

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-manager.d.ts

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-resizable-handle.d.ts

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-resizable.d.ts

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-touch.d.ts

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/gridstack-engine.d.ts

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/gridstack.d.ts

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/types.d.ts

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/utils.d.ts

Sample Code

⚠️ import 文を含む一部のコードは、jsFiddleで正しく実行されない場合があります。エラーが発生した場合は、コードをコピーしてご自身の環境でお試しください。

📄 HTML
<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">Item 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">Item 2</div>
  </div>
</div>

🎨 External CSS
<link href="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/1.1.2/gridstack.min.css" rel="stylesheet">

🧩 External JS
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/1.1.2/gridstack.all.js"></script>

⚙️ JavaScript
$(function () {
  $('.grid-stack').gridstack();
});