Allow Gridstack draggable only to a specific area of the item

Question

I am using Gridstack js to create draggable/resizable widgets for a dashboard. The picture shows an example widget. I have kept the default draggable values as is and I can drag it by double clicking anywhere inside the widget. What I want to do is make the widget draggable only by clicking on the gray area. Should the default draggable values be overridden for this? If so how? I am fairly new to jquery/js, and couldn't find anything similar on the internet.

score 3 · Answer 1 · answered Jul 05 '17 at 16:38

3

Assuming you're using gridstack's default of jQueryUI's draggable, you can re-set the draggable constructor with the cancel option on any elements you want to not be draggable. In the code below, adding the not-draggable class any divs inside of the grid stack item will have its dragging suppressed.

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

answered Jul 05 '17 at 16:38

ctb3

396
6
15

Thank you very much. I almost gave up what I wanted to do because I couldn't find a way around this.. – Ruwangi Jul 06 '17 at 06:59
Yeah took me a bit to figure it out myself, had stumbled across your question earlier and figured I'd share once I got it working for myself. :) – ctb3 Jul 06 '17 at 20:54

score 2 · Accepted Answer · answered Jan 12 '23 at 01:46

The current answer is out of date. The way to do this in 2023 is with the draggable option when you init GridStack.

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

drag-target should be the class name of where you want your window to be draggable from.

Slightly different from your image, but if you have something like the following, you will be able to click and drag the gray section, but the pink won't be draggable.

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

that is correct. I made GridStack stop using jquery/jqueryUI a long time ago. the `draggable { handle: '.header' }` option was always, and now is the only way to do that. — Alain Dumesny, Jan 14 '23 at 22:25

Allow Gridstack draggable only to a specific area of the item

2 Answers2