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

Question

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

Answer 1

假设您正在使用gridstack默认的jQueryUI的draggable，您可以在您想要不可拖动的任何元素上使用cancel选项重新设置可拖动构造函数。 在下面的代码中，将not-draggable类添加到网格堆栈项内的任何div将禁止拖动。

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

Answer 2

当前答案已过时。 在 2023 年执行此操作的方法是在初始化GridStack时使用draggable选项。

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

drag-target应该是您希望 window 可从中拖动的位置的 class 名称。

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

 .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>