Запрет перетаскивания для перемещения пустой ячейки в сетке css - PullRequest
Новая
       36

Запрет перетаскивания для перемещения пустой ячейки в сетке css

1 голос
/ 30 января 2020

Я бы хотел, чтобы ячейка не двигалась в sortablejs.

Все элементы перетаскиваемы и сортируемы, кроме .clearing. Тем не менее, вы можете перемещать любые другие дивы вокруг или перед .clearing и заставлять его двигаться. Попробуйте переместить A или B в начало сетки (левый верхний угол) и заметьте, что .clearing опущено вниз по сетке.

enter image description here

I хотел бы отключить это и убедиться, что .clearing не может быть перемещен вообще. Спасибо 

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

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

РЕДАКТИРОВАТЬ: обновленный снимок экрана, описание и код ручки с текущим нежелательным поведением

Ответы [ 2 ]

3 голосов
/ 31 января 2020

Выберите, какие элементы можно перетаскивать. 

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

Codepen

В качестве альтернативы вы можете использовать draggable: 'div:not(.clearing)' или что-то подобное.

2 голосов
/ 31 января 2020

Поскольку сортируемый. js фактически переупорядочивает HTML, все, что нам нужно сделать, это определить местоположение "очищающего" div, и естественный поток сетки позаботится обо всем остальном.

Удалите «очищающий» фильтр из сортируемого кода. js код и блокировка требуемого деления в нужное место в сетке с помощью: 

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