在 gridstack.js 中,拖动功能不起作用
Posted
技术标签:
【中文标题】在 gridstack.js 中,拖动功能不起作用【英文标题】:In gridstack.js, dragging feature isnt working 【发布时间】:2017-06-10 07:17:13 【问题描述】:我在下面的代码(基本结构)中使用了 GridStack.JS
<div class="grid grid-stack">
<div class="grid-item cards grid-stack-item" data-gs- data-gs->
<div class="inner-grid">
</div>
</div>
<div class="grid-item cards grid-stack-item" data-gs- data-gs->
<div class="inner-grid">
</div>
</div>
<div class="grid-item cards grid-stack-item" data-gs- data-gs->
<div class="inner-grid">
</div>
</div>
<div class="grid-item cards grid-stack-item" data-gs- data-gs->
<div class="inner-grid">
</div>
</div>
<div class="grid-item cards grid-stack-item" data-gs- data-gs->
<div class="inner-grid">
</div>
</div>
<div class="grid-item cards grid-stack-item" data-gs- data-gs->
<div class="inner-grid">
</div>
</div>
<div class="grid-item cards grid-stack-item" data-gs- data-gs->
<div class="inner-grid">
</div>
</div>
<div class="grid-item cards grid-stack-item" data-gs- data-gs->
<div class="inner-grid">
</div>
</div>
脚本如下
<script type="text/javascript">
$(function ()
var options =
cellHeight: 80,
verticalMargin: 10,
columns: 14,
acceptWidgets: '.',
animate: true,
handle: '.draghandle',
float: true,
draggable: handle: '.-content', scroll: true, appendTo: 'body',
;
$('.grid-stack').gridstack(options);
);
我这里有 2 个问题 1.我无法让grid-stack-items能够被拖动。有人能帮我吗? 2. 其次,我无法缩放 grid-stack-item 容器以增加其高度以匹配内容
任何帮助将不胜感激 如果需要,我还可以提供更清晰的说明
谢谢
【问题讨论】:
【参考方案1】:1) 您指定的拖动句柄 .-content
在您的标记中不存在!
2) Gridstack 项显然具有固定的宽度和高度,因为它们是一个矩阵,如果您希望某个项具有更高的高度,则必须通过 data-gs-height="x"
明确指定它
【讨论】:
以上是关于在 gridstack.js 中,拖动功能不起作用的主要内容,如果未能解决你的问题,请参考以下文章
如何在 Angular6 项目中使用 gridstack.js
将 gridstack.js 包装到 Angular 2 组件中