Quiero bloquear el div actual cuando hago clic en el botón pin en él. Entonces, incluso si el usuario intenta arrastrar y soltar cualquier otro elemento div en el div bloqueado actual, no debería permitirlo. Estoy usando la pila de cuadrícula para el tablero. Utilicé la función .movable mencionada en el documento y también intenté agregar el atributo ( data-gs-no-move="true" y data-gs-locked='true' ) al elemento html dinámicamente cuando hago clic en el botón pin .

no funciona Cada vez que arrastro cualquier otro div sobre el div anclado, el div anclado actual se aleja de la posición anclada. Alguien por favor ayuda.

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