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

Question

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

Answer 1

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

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