防止拖动以移动 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

Select哪些元素是可拖动的。

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

Codepen

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

Answer 2

因为 sortable.js 实际上重新排序 HTML 我们需要做的就是确定 "clearing" div 的位置，自然网格流会处理其余的。

从 sortable.js 代码中删除 "clearing" 过滤器，并 将所需的 div 锁定 div 到其在网格中的所需位置：

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>