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

Answer 1

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" });

Answer 2

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>