防止拖动以移动 CSS 网格中的空单元格答案

【问题标题】：Prevent dragging to move the empty cell in css grid防止拖动以移动 CSS 网格中的空单元格
【发布时间】：2020-05-16 11:43:06
【问题描述】：

我想让一个单元格在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

编辑：更新了屏幕截图、描述和 codepen 以及当前不受欢迎的行为

【问题讨论】：

喜欢这个？ codepen.io/Chris-Happy/pen/MWYMjBo
可以分享一下截图吗？ clearing 不清楚你的意思
感谢@Paulie_D，我更新了描述和代码笔以反映实际问题，希望现在会更清楚
@ChrisHappy 抱歉我之前不清楚，您介意再看一下吗？
@Paulie_D 我们有一个设计，clearing 实际上是一个上传按钮，其余的是图像。您可以重新排序图像，但上传/放置区域始终是网格中的第一个元素

标签： javascript css-grid sortablejs

【解决方案1】：

选择可拖动的元素。

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

Codepen

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

【讨论】：

或者只使用filter选项

【解决方案2】：

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

从 sortable.js 代码中删除“清除”过滤器，并将所需的 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>

【讨论】：