I want to lock the current div when I click on pin button in it. So even if user try to drag and drop any other div element into the current locked div it should not allow it. I am using Grid stack for dashboard. I have used .movable function mentioned on the document and also tried adding attribute (data-gs-no-move="true" and data-gs-locked='true') to the html element dynamically when I click on the pin button.

It doesn't work. Every time I drag any other div on top of pinned div current pinned div is moving away from the pinned position. Anyone please help.

<div class="grid-stack-item ui-draggable ui-resizable ui-resizable-autohide ui-resizable-disabled ui-draggable-disabled card-lock" data-width="4" data-height="4" data-gs-width="4" data-gs-height="4" data-time="1654604606671" data-gs-x="0" data-gs-y="1"  data-category="energy" data-view-type="bar" data-multiple="true"  data-pinned="false" data-role="card">
        <div class="card-inner grid-stack-item-content ">
            <div class="card-header  ui-draggable-handle">
                <div class="title" >card title</div>
                <button class="pin-card">pin me </button>
            </div>
        </div>
</div>