防止拖动以在CSS网格中移动空单元格

Question

我想让一个单元格不移动sortablejs。

[.clearing以外的所有项目都是可拖动和可排序的。但是，您可以在.clearing周围或前面移动任何其他div并强制其移动。尝试将A或B移动到网格的开头（左上角），并观察.clearing被向下推到网格。

我想禁用它，并确保.clearing完全不能移动。谢谢

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

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

编辑：更新了屏幕截图，描述和代码笔，并具有当前不希望的行为

Answer 1

选择可拖动的元素。

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

Codepen

或者，您可以使用draggable: 'div:not(.clearing)'或类似名称。

Answer 2

因为sortable.js实际上对HTML进行了重新排序，所以我们需要做的就是确定“清除” div的位置，自然的网格流将处理其余部分。

从sortable.js代码中删除“清除”过滤器，然后使用以下方法将所需的div lock移至网格中的所需位置：

grid-row:1;
grid-column:1

$(()=>{
  const wrapper = $("#wrapper")[0]
  Sortable.create(wrapper)
})

body {
  margin: 40px;
}

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

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
  cursor: grab;
}

.clearing {
  background-color: blue;
  color: #fff;
  border-radius: 5px;
  padding: 10px;
  font-size: 150%;
  grid-row:1;
  grid-column:1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.10.1/Sortable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper" id="wrapper">
  <div class="clearing" title="but I can be moved by moving others around me">Can't move me</div>
  <!-- should not allow dragging any element before this .clearing, try to drag A before here and it does move -->
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
  <div class="box e">E</div>
  <div class="box f">F</div>
</div>