javascriptjqueryjquery-uidraggablegridstack

Allow Gridstack draggable only to a specific area of the item

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.

Sample widget

Solution

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