Prevent dragging to move the empty cell in css grid

Question

I would like to make a cell to not move in sortablejs.

All items are draggable and sortable except for .clearing. However, you can move any other divs around or in front of .clearing and force it to move. Try to move A or B to the beginning of the grid (left top corner) and observe .clearing is pushed down the grid.

I would like to disable that and ensure .clearing can not be moved at all. Thanks

    .wrapper {
      display: grid;
      grid-template-columns: 100px 100px 100px;
      grid-gap: 10px;
      background-color: #fff;
      color: #444;
    }

https://codepen.io/zocoi/pen/xxbogZw

EDIT: updated screenshot, description and codepen with current undesired behaviour

Answer 1

Select which elements are draggable.

$(()=>{
  const wrapper = $("#wrapper")[0]
  Sortable.create(wrapper, {
    draggable: '.box'
  })
})

Codepen

Alternatively, you can use draggable: 'div:not(.clearing)' or something similar.