允许 Gridstack 仅可拖动到项目的特定区域

Question

我正在使用 Gridstack js 为仪表板创建 draggable/resizable 小部件。图片显示了一个示例小部件。我保留了默认的可拖动值，我可以通过双击小部件内的任意位置来拖动它。我想要做的是仅通过单击灰色区域使小部件可拖动。是否应该为此覆盖默认的可拖动值？如果是这样怎么办？我是 jquery/js 的新手，在互联网上找不到任何类似的东西。

Answer 1

假设您正在使用 gridstack 的默认 jQueryUI 可拖动，您可以在任何您不想拖动的元素上使用取消选项重新设置可拖动构造函数。在下面的代码中，添加 not-draggable class 网格堆栈项目内的任何 div 都会抑制拖动。

$('.grid-stack-item').draggable({cancel: "div.not-draggable" });