gridstack.js是一款响应式可拖拽的元素组件网格布局jQuery插件。该jQuery插件允许你创建给予Bootstarp v3的响应式可拖拽的网格布局界面，可以用于制作可拖拽的多列网格布局。并且它还可以支持触摸屏设备。
gridstack.js依赖下面的js库文件：
lodash.js(>= 3.5.0)
jQuery(>= 1.11.0)
jQuery UI。组件的最小需求：Core, Widget, Mouse, Draggable, Resizable
(可选项)knockout.js(>= 3.2.0)
你也可以使用underscore.js来取代lodash.js。
HTML结构
data-gs-x="0" data-gs-y="0"
data-gs-width="4" data-gs-height="2">
data-gs-x="4" data-gs-y="0"
data-gs-width="4" data-gs-height="4">
初始化插件
$(function () {
var options = {
cell_height: 80,
vertical_margin: 10
gridstack.js是一款响应式可拖拽的元素组件网格布局jQuery插件。该jQuery插件允许你创建给予Bootstarp v3的响应式可拖拽的网格布局界面，可以用于制作可拖拽的多列网格布局。并且它还可以支持触摸屏设备。外部依赖gridstack.js依赖下面的js库文件：lodash.js(>= 3.5.0)jQuery(>= 1.11.0)jQuery UI。组件的最小需求：...
gridstack.js
适合移动设备的现代Typescript库，用于仪表板
布局
和创建。 制作
拖
放
式
多列
响应
式
仪表板从未如此简单。 具有多个绑定，并且可以与 ， ， ， ， 等一起使用（请参见部分）。
受到不再维护的栅格的启发，栅格栅格是用爱建造的。
如果您发现此lib有用，请捐赠或 （adumesny）并提供支持！
加入我们的Slack： :
用生成的目录
演示和例子
yarn add gridstack
// or
npm install -- save gridstack
ES6或打字稿
import 'gridstack/dist/gridstack.min.css' ;
import GridStack from 'gridstack' ;
// THEN to get
HTML
5 drag&drop
import '
本文讲的是项目管理者必知：适用于仪表盘项目的7个优秀JavaScript库，仪表盘是用于目标或业务流程的视觉指示工具，也用于切割杂乱无章的数据，从而分割出要点的重要工具。它可以帮助评估信息并及时做出正确的决定，一款实时可视化的仪表盘通常由图标、测绘图、图形符号以及数据表格等组成。
作为项目经理，经常会面临“我们的进度怎么样了，接下来会怎么样？”这样的问...
<title>jsPlumb
拖动
元素
位置</title>
<script src="https://cdn.bootcdn.net/ajax/libs/
jquery
/3.5.1/
jquery
.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jsPlumb/2.17.7/js/jsplumb.min.js"></script>
<style type="text/css">
#container {
width: 600px;
height: 400px;
border: 1px solid #ccc;
position: relative;
.node {
width: 100px;
height: 100px;
background-color: #f0f0f0;
border: 1px solid #ccc;
position: absolute;
text-align: center;
line-height: 100px;
cursor: move;
</style>
</head>
<div id="container">
<div class="node draggable" style="top: 100px; left: 100px;">节点1</div>
<div class="node draggable" style="top: 200px; left: 200px;">节点2</div>
<script type="text/javascript">
jsPlumb.ready(function() {
jsPlumb.draggable($(".draggable"), {
containment: "parent"
</script>
</body>
</
html
>
