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

Question

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

Answer 1

在 2023 年以后执行此操作的方法是在初始化时使用

draggable

选项

GridStack

。

GridStack.init({
        draggable: {
            handle: '.drag-target'
        },
    });

drag-target

应该是您希望窗口可拖动的位置的类名称。

与您的图像略有不同，但如果您有类似以下的内容，您将能够单击并拖动灰色部分，但粉红色部分将不可拖动。

.outer {
  border: solid black 2px;
}

.header {
  background: grey;
  height: 20px;
}

.content {
  background: pink;
  height: 80px;
}

  

<div class="outer">
  <div class="header drag-target">
  </div>
  <div class="content"></div>
</div>

Answer 2

假设您使用的是 gridstack 默认的 jQueryUI 的可拖动功能，您可以在任何您不希望可拖动的元素上使用取消选项来重新设置可拖动构造函数。在下面的代码中，添加

not-draggable

类，网格堆栈项内的任何 div 都会抑制其拖动。

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